TanstackQuery, useInfiniteQuery, 무한스크롤

26. Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.
    • 답변)
      • 의도:
        • 지원자가 Tanstack Query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있는지 평가.
      • 팁:
        • useInfiniteQuery의 개념과 사용법을 설명하세요.
        • 무한 스크롤을 구현하는 과정에서의 주요 고려사항을 설명하세요.
        • useInfiniteQuery를 사용하는 예제를 떠올려 보세요.
      • 모범답안:
        • useInfiniteQuery는 페이징된 데이터를 가져오고 무한 스크롤을 구현하는 데 사용됩니다.
        • 데이터의 끝에 도달했을 때 추가 데이터를 가져오도록 설정할 수 있습니다.
        • 무한 스크롤을 통해 사용자 경험을 향상시킬 수 있습니다.

인피니트 쿼리 구조

🖥️ typescript

const {
  data,              // { pages: [], pageParams: [] }
  fetchNextPage,     // 다음 페이지 로드 함수
  hasNextPage,       // 다음 페이지 존재 여부
  isFetchingNextPage,// 다음 페이지 로딩 상태
} = useInfiniteQuery({
  queryKey: ['infinite'],
  queryFn: ({ pageParam = 0 }) => fetchPage(pageParam),
  getNextPageParam: (lastPage, allPages) => {
    // 다음 페이지 파라미터 계산 로직
    return lastPage.nextCursor;
  },
});

무한 스크롤/페이지네이션 커스텀 훅

🖥️ typescript

// hooks/useInfiniteUsers.ts
export const useInfiniteUsers = () => {
  return useInfiniteQuery({
    queryKey: ['users', 'infinite'],
    queryFn: async ({ pageParam = 1 }) => {
      const response = await axios.get(`/api/users?page=${pageParam}`);
      return response.data;
    },
    getNextPageParam: (lastPage, pages) => {
      if (lastPage.hasMore) return pages.length + 1;
      return undefined;
    },
  });
};

// 사용 예시
function InfiniteUserList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage
  } = useInfiniteUsers();

  return (
    <div>
      {data?.pages.map((page, i) => (
        <React.Fragment key={i}>
          {page.users.map(user => (
            <UserItem key={user.id} user={user} />
          ))}
        </React.Fragment>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
          ? 'Load More'
          : 'Nothing more to load'}
      </button>
    </div>
  );
}