[134일차] Tanstack Infinite Queries 톺아보기

 

융합 프로젝트를 진행하면서 무한스크롤과 관련된 파트는 전부 다 Infinite Queries를 사용하여 구현하였다.

무한스크롤 (아래 자세히 보면 로딩 아이콘이 표시되며 다음 Page를 렌더링한다)

 

왜 Infinite Queries를 사용하면 좋은지 한번 톺아보고자 한다.

 

 

 

Infinite Queries란?

Infinite Queries는 TanStack Query에서 제공하는 기능으로, 페이지네이션이 필요한 데이터를 “연속된 페이지 형태”로 관리하는 데이터 패칭 방식이다.

일반적인 useQuery가 단일 요청-응답 구조라면, useInfiniteQuery는 여러 페이지 데이터를 누적하여 관리한다.

핵심은 다음과 같다.

• 페이지 단위 데이터를 pages[] 형태로 관리
• 다음 페이지 요청을 pageParam 기반으로 자동 연결

Infinite Queries의 구조와 동작 방식

 

어떤 상황에서 어떻게 쓰이나요?

다음과 같은 상황에서 사용된다.

• 무한 스크롤 (SNS 피드, 콘텐츠 리스트, 숏폼 목록)
• “더보기” 버튼 기반 pagination
• cursor 기반 API (lastId, nextCursor 등)

기본적인 사용 구조는 아래 코드처럼 사용한다.

 

const {
  data,
  fetchNextPage,
  hasNextPage,
} = useInfiniteQuery({
  queryKey: ["list"],
  queryFn: ({ pageParam = 0 }) => fetchList(pageParam),
  getNextPageParam: (lastPage) => lastPage.nextCursor,
});

 

 

첫 요청 실행 -> 응답에서 다음 cursor 추출 -> `fetchNextPage()` 호출 시 자동으로 다음 데이터 요청 -> 데이터는 `pages[]`에 누적되는 흐름이다.

 

 

장점

1. 상태 관리 제거

기존 방식에서는 page, cursor 등을 직접 관리해야 했지만, Infinite Query는 이를 내부적으로 처리한다.

→ 불필요한 상태 코드 감소

 

2. 데이터 흐름이 일관됨

• queryFn → getNextPageParam → fetchNextPage
• 이 구조가 고정되어 있어 로직이 단순해진다

→ 유지보수 시 이해 비용 감소

 

3. 캐싱이 자동으로 적용됨

• 이전 페이지 데이터 유지
• 동일 queryKey 기준 재사용
• 뒤로가기 시 데이터 재요청 없음

→ UX 개선 + 네트워크 비용 절감

 

4. 중복 요청 방지

• 내부적으로 요청 상태 관리
• isFetchingNextPage로 제어 가능

→ race condition 감소

 

5. 무한 스크롤과 자연스럽게 결합

IntersectionObserver와 결합하면 거의 표준적인 무한 스크롤 구조를 만들 수 있다.

 

IntersectionObserver + fetchNextPage 연결 구조

 

단점

1. 데이터 구조가 복잡해짐

data.pages.flatMap(page => page.items)

 

• 단순 배열이 아니라 pages[] 구조
• 매번 flatten 필요

 

2. 메모리 사용 증가

• 페이지가 계속 누적됨
• 리스트가 길어질수록 메모리 부담 증가

→ virtualization (react-window 등) 필요할 수 있음

 

3. 부분 업데이트가 까다로움

• 특정 아이템만 수정하려면 전체 pages를 순회해야 함

 

4. SSR / 초기 데이터 처리 난이도

• 서버 컴포넌트 환경에서 다루기 까다로움
• hydration 시 구조 맞추는 작업 필요

 

 

기존 구현 방식과의 차이

 

기존 방식

const [page, setPage] = useState(0);
const [list, setList] = useState([]);

const fetchData = async () => {
  const res = await api(page);
  setList(prev => [...prev, ...res.items]);
};

문제점)

• 상태 직접 관리
• 중복 요청 방지 직접 구현
• 캐싱 없음
• 로직 분산

Infinite Query 방식

useInfiniteQuery({
  queryKey: ["list"],
  queryFn,
  getNextPageParam,
});

 

기존 방식 vs Infinite Query 비교 도식화

 

---

회고

이렇게 융합프로젝트에서 유용하게 사용한 Infinite Queries에 대해서 알아보았다. 평소 무한스크롤을 구현할 때 tanstack을 사용하지 않고 직접 구현하느라 오랜 시간이 소요됐었는데, 이렇게 쉽게 무한스크롤을 구현할 수 있는 것에 감탄했다.

어느 덧 정말 마지막 부트캠프에서의 TIL이 되었다.

부트캠프를 회고하는 글을 작성할 준비를 해야겠다..

 

TIL 담당자님 그동안 감사했습니다 !!!!

 

---

참고자료

Infinite Queries – React Query 한글 문서