TanStack Query 너머를 향해!

1. staleTime vs gcTime(cacheTime)

staleTime: 데이터를 '신선'하다고 간주하는 시간. 이 안에서는 refetch가 발생하지 않습니다. gcTime(구 cacheTime): 쿼리를 사용하는 컴포넌트가 없어진 후 캐시를 유지하는 시간. 두 값을 구분하지 못하면 불필요한 네트워크 요청이 발생하거나 캐시가 너무 빨리 사라집니다.

핵심 용어

2. Optimistic Update 패턴

useMutation의 onMutate에서 캐시를 즉시 업데이트하고, onError에서 이전 값으로 롤백합니다. 사용자는 서버 응답 전에 UI 변화를 즉시 확인할 수 있어 체감 속도가 크게 향상됩니다. 낙관적 업데이트 중 다른 쿼리 refetch를 막으려면 `cancelQueries`를 onMutate에서 호출합니다.

핵심 용어

3. SSR/Next.js App Router 통합

서버 컴포넌트에서 prefetchQuery로 데이터를 가져온 뒤 dehydrate로 직렬화해 클라이언트에 전달합니다. 클라이언트에서 HydrationBoundary로 복원하면 초기 로딩 없이 캐시된 데이터를 사용할 수 있습니다. 이 방식으로 SSR의 SEO·성능 이점과 TanStack Query의 클라이언트 캐싱 이점을 동시에 누릴 수 있습니다.

핵심 용어

Q1. TanStack Query에서 staleTime과 gcTime의 차이를 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "TanStack Query에서 staleTime과 gcTime의 차이를 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] staleTime은 '언제 다시 요청할지'를 결정하고, gcTime은 '언제 메모리에서 삭제할지'를 결정합니다. staleTime=0이면 컴포넌트가 마운트될 때마다 백그라운드 refetch가 발생합니다. gcTime은 쿼리를 사용하는 컴포넌트가 없어진 후 카운트가 시작됩니다.

Q2. Optimistic Update를 구현할 때 롤백은 어떻게 처리하나요?

힌트

[감점 답변] 정의만 반복하거나 "Optimistic Update를 구현할 때 롤백은 어떻게 처리하나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] onMutate에서 `queryClient.getQueryData()`로 이전 데이터를 저장하고 `queryClient.setQueryData()`로 낙관적 값을 적용합니다. onError에서 저장해둔 이전 데이터로 `setQueryData`를 다시 호출해 롤백합니다. onSettled에서 `invalidateQueries`로 서버와 동기화하는 것도 중요합니다.

Q3. Next.js App Router에서 TanStack Query를 사용하는 방법을 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "Next.js App Router에서 TanStack Query를 사용하는 방법을 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 서버 컴포넌트에서 `new QueryClient()` 생성 → `prefetchQuery()`로 데이터 가져오기 → `dehydrate(queryClient)`로 직렬화 → `<HydrationBoundary state={dehydratedState}>`로 클라이언트에 전달. 클라이언트 컴포넌트에서 `useQuery`를 사용하면 이미 캐시에 데이터가 있어 로딩 없이 렌더됩니다.