1. 어떻게 구현할까?

  1. React Query의 useInfiniteQuery를 사용해서 페이지 단위로 데이터를 불러오고

  2. react-intersection-observer의 useInView 훅을 사용해서 데이터의 마지막 요소가 보이면 새로운 데이터 받아오기

위의 과정으로 구현하면 될 것 같다. 1번부터 차근차근 구현해봅시다.

2. useInfiniteQuery로 페이지 단위로 데이터 불러오기

useInfiniteQuery

우선 useInfiniteQuery가 무엇인지 알아봅시다.

useInfiniteQuery는 react-query 라이브러리에서 제공하는 훅으로, 무한 스크롤이나 페이지네이션 구현을 간편하게 구현할 수 있도록 도와줍니다.

데이터를 페이지 단위로 fetching하고 각 페이지의 데이터를 관리하면서 세로운 페이지를 로드할 수 있는 기능을 구현할 수 있습니다.

useQuery를 페이지 단위로 불러오는 것이 useInfiniteQuery라고 생각하면 될 것 같습니다. 몇기자 페이지 관련 옵션을 제외하고는 useQuery와 동일한 옵션을 가지고있습니다.

사용 예시

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

주요옵션

리턴값