✅ TanStack Query란?
기존에 React Query로 알려졌던 라이브러리는 현재 TanStack Query라는 이름으로 발전했습니다. 단순한 데이터 fetching 라이브러리를 넘어, **서버 상태(server state)**를 효과적으로 관리하기 위한 도구로 자리 잡았습니다.
클라이언트 상태(state)와는 달리, 서버 상태는 외부 데이터 소스에 의해 변화하고, 클라이언트는 그 상태를 동기화해서 보여주기만 합니다. 즉, 서버 상태는 언제든지 바뀔 수 있기 때문에 항상 최신 상태를 유지하는 것이 중요합니다. 이 부분에서 TanStack Query가 진가를 발휘합니다.
🔍 서버 상태 관리, 왜 TanStack Query인가?
✅ 1. 자동 리페치 (Auto Refetch)
- 사용자가 페이지를 다시 포커스하거나, 네트워크 연결이 복구되면 데이터를 자동으로 재요청합니다.
- 예: 실시간성이 중요한 페이지에서 유용함
useQuery(['posts'], fetchPosts, {
refetchOnWindowFocus: true,
refetchOnReconnect: true,
});📌 선택적 사용 가능. 디폴트는
true, 필요 시 꺼줄 수 있습니다.
✅ 2. 백그라운드 업데이트
- 캐시된 데이터를 우선 보여주되, 백그라운드에서 최신 데이터를 다시 불러옵니다.
- 이를 통해 UX는 부드럽고, 데이터는 항상 신선하게 유지됩니다.
useQuery(['user'], fetchUser, {
staleTime: 0, // 즉시 stale 처리 → 백그라운드 refetch
});stale-while-revalidate 전략과 유사한 동작 방식입니다.
✅ 3. 쿼리 무효화 (Invalidation)
- POST/PUT/DELETE 같은 변화 이후 관련 데이터를 자동으로 새로고침할 수 있습니다.
const queryClient = useQueryClient();
mutationFn().then(() => {
queryClient.invalidateQueries(['posts']);
});✅ Redux 등에서는 수동으로 상태를 직접 업데이트해야 하는 반면, TanStack Query는 간단히 쿼리 무효화만 해주면 됩니다.
✅ 4. 쿼리 상태 관리 자동화
- 로딩, 성공, 실패 상태를 별도 useState 없이 간단히 처리할 수 있습니다.
const { data, isLoading, isError } = useQuery(['user'], fetchUser);필요한 UI 조건 분기 처리를 손쉽게 구현 가능
✅ 5. 중복 요청 방지 (Request Deduplication)
- 같은 쿼리가 여러 컴포넌트에서 동시에 요청돼도, 네트워크 요청은 한 번만 발생합니다.
// 여러 컴포넌트에서 동시에 요청해도 실제 호출은 1회
useQuery(['user'], fetchUser);서버 부하를 줄이고, 클라이언트 성능도 최적화됩니다.
✅ 6. 서버 상태 동기화 + 캐시 유지 전략
keepPreviousData,placeholderData,select등을 활용하면 UX를 부드럽게 유지하면서도 서버 데이터를 자연스럽게 동기화할 수 있습니다.
useQuery(['page', page], fetchPage, {
keepPreviousData: true,
});페이지 이동 시 깜빡임 없이 자연스러운 전환 가능
✅ 7. 페이징/무한스크롤 등 복잡한 서버 인터랙션 지원
useInfiniteQuery,getNextPageParam등을 사용하면 무한스크롤을 간단히 구현할 수 있습니다.
useInfiniteQuery(['comments'], fetchComments, {
getNextPageParam: (lastPage) => lastPage.nextCursor,
});내부적으로 페이지 정보, 상태 관리를 자동 처리해줍니다.
✅ 8. SSR/SSG 통합 용이 (Next.js)
- Next.js App Router 기준,
dehydrate/rehydrate방식으로 SSR에 최적화되어 있습니다. - 서버 컴포넌트에서
prefetchQuery로 데이터를 미리 받아두고, 클라이언트에서useQuery로 불러오면 props drilling 없이 상태 공유가 가능합니다.
// 서버에서
await queryClient.prefetchQuery(['posts'], fetchPosts);
// 클라이언트에서
const { data } = useQuery(['posts'], fetchPosts);🧠 정리: TanStack Query는 단순한 캐시 도구가 아니다
단순한 GET 요청 결과 캐싱만 생각했다면 TanStack Query의 진가를 절반도 못 본 셈입니다. 이 라이브러리는 서버 상태의 생명주기를 관리하고, 사용자 경험을 최적화하며, 개발 생산성을 높이는 도구입니다.
클라이언트 상태 관리 라이브러리(Redux, Zustand 등)와는 관점이 다릅니다.
- ✅ TanStack Query는 서버 데이터를 "가져오고 유지하는" 데 집중합니다.
- ✅ 클라이언트 상태는 여전히 Redux/Zustand의 영역이지만, 서버 상태는 TanStack Query가 더 적합합니다.
