방법 2: TanStack Query 캐싱

useInfiniteQuery의 캐싱과 sessionStorage로 스크롤 위치를 복원합니다.

작동 원리

1. QueryClient 캐시 설정

{
  staleTime: 5 * 60 * 1000,  // 5분간 fresh 상태 유지
  gcTime: 30 * 60 * 1000,    // 30분간 캐시 보관
  refetchOnWindowFocus: false,
}

2. useInfiniteQuery로 데이터 캐싱

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
});

3. sessionStorage로 스크롤 저장

// 스크롤 이벤트 (debounced)
sessionStorage.setItem('scroll_tanstack-posts', String(window.scrollY));

// 데이터 로드 후 복원
const saved = sessionStorage.getItem('scroll_tanstack-posts');
if (saved) window.scrollTo(0, parseInt(saved));

staleTime vs gcTime

staleTime (5분): 데이터가 "신선한(fresh)" 상태로 유지되는 시간. 이 시간 동안은 페이지 복귀 시 refetch 없이 캐시 데이터를 바로 보여줍니다.

gcTime (30분): 사용되지 않는 캐시가 가비지 컬렉션되기 전까지 메모리에 유지되는 시간. staleTime이 지나도 캐시는 남아있어 즉시 표시 후 background refetch합니다.

장점

- 자동 캐싱 및 상태 관리
- 데이터 신선도 자동 관리
- background refetch 지원
- DevTools로 캐시 상태 확인 가능

단점

- 스크롤 위치는 별도 관리 필요
- 새로고침 시 캐시 초기화
- 설정 이해 필요 (staleTime, gcTime)