[250303] tanstack query의 페이징

📌 필요성

페이지네이션 및 무한스크롤은 서버에서 불러오는 정보의 양이 많을 경우 필수적입니다.

• 로딩 시간 단축: 모든 데이터를 한 번에 불러오면 로딩 시간이 길어지고, 사용자 경험(UX)이 저하됨
• 효율적인 데이터 관리: 필요할 때 필요한 데이터만 로드함으로써 성능 최적화 가능

따라서 페이지네이션 및 무한스크롤을 통해 데이터를 나눠서 불러오면 사용자 경험이 개선됩니다.

🛠️ 페이지네이션 구현

✅ 요구사항

• 최대 페이지 수 파악

  • 서버에서 불러올 수 있는 총 데이터 양을 확인해 최대 페이지 수 계산

• limit과 offset을 사용한 데이터 접근

  • 현재 접근 중인 페이지 정보를 기반으로 필요한 데이터만 요청

• pre-fetching을 통한 로딩 속도 개선

  • 페이지 번호에 마우스를 호버 시 해당 데이터를 미리 fetch
  • 이미 fetch된 데이터는 새로 요청하지 않고 캐시에서 바로 사용

💡 구현 코드

// 페이징 query
  const { data, isLoading } = useQuery({
    queryKey: QueryKeys.PAGED_PLANS(page),
    queryFn: () => fetchMyPlansLimit(myId, PAGE_SIZE, (page - 1) * PAGE_SIZE),
    keepPreviousData: true,
    select: (data) => ({
      plans: data.data,
      totalCount: data.headers // totalCount 데이터 가져오기
    }),
    staleTime: QueryTime.TWO_MINUTE,
    cacheTime: QueryTime.FIVE_MINUTE
  });

---

// pre-fetch 로직
  const prefetchPage = (page) => {
    const queryKey = QueryKeys.PAGED_PLANS(page);

    // 이미 캐시에 데이터가 있는 경우 prefetch 실행 안 함
    if (!queryClient.getQueryData(queryKey)) {
      queryClient.prefetchQuery({
        queryKey,
        queryFn: () => fetchMyPlansLimit(myId, PAGE_SIZE, (page - 1) * PAGE_SIZE),
        staleTime: QueryTime.TWO_MINUTE,
        cacheTime: QueryTime.FIVE_MINUTE
      });
    }

🎯 핵심 포인트

• TanStack Query의 useQuery()훅의 여러 추가 옵션들을 활용해 서버 상태 관리
• pre-fetching을 통해 사용자 경험 강화
• 캐싱된 데이터 재활용으로 불필요한 네트워크 요청 최소화
• QueryKey / 매직넘버의 추상화를 통해 유지/보수 강화
• response의 header에서 총 데이터 양 파악

🔥 느낀 점

TanStack Query를 사용하면서 상태 관리가 매우 편리해졌고, pre-fetching 기능을 통해 UX가 눈에 띄게 개선되었습니다. 무한스크롤에서는 useInfiniteQuery() 훅을 사용하여 데이터 추가 로딩 로직을 컴포넌트에서 전달 하는 과정이 있던데 이것도 한 번 도전하고 싶은 기능이였습니다.