TanStack Query(구 React Query)를 활용한 서버 상태 관리, 캐싱 전략, queryKey 설계, invalidateQueries, SSR/CSR 환경 대응 등 실무 중심의 사용법과 내부 동작 원리를 정리합니다.
이 글에서 정리하는 내용 TanStack Query Hydration 오류는 서버에서 prefetch한 데이터와 클라이언트 QueryClient가 같은 캐시를 공유하지 못할 때 자주 생깁니다. QueryClient 생성 위치, dehydrate/HydrationBoundary, queryKey 일치, Prov…
더 읽기
TanStack Query 데이터가 바뀌었는데 화면이 갱신되지 않는 이유에서 먼저 확인할 것 TanStack Query 데이터가 바뀌었는데 화면이 갱신되지 않는 이유는 증상만 보고 바로 고치기보다 실행 환경, 설정, 데이터 형태를 나눠 확인해야 합니다. 서버 데이터는 …
더 읽기
TanStack Query v5에서 무한 스크롤을 볼 때 먼저 잡아야 할 기준 무한 스크롤은 화면 아래에 닿으면 다음 데이터를 가져오는 기능처럼 보이지만, 실제 구현에서 먼저 흔들리는 부분은 스크롤 감지가 아니라 다음 요청에 넘길 값입니다. 이 글은 TanStack Q…
더 읽기
이 글에서 정리하는 내용 TanStack Query v5 기준으로 staleTime과 gcTime의 차이를 정리합니다. 캐시가 남아 있는데도 요청이 다시 나가는 이유, v4의 cacheTime이 v5에서 gcTime으로 바뀐 이유, 실제 React 화면에서 두 옵션을 …
더 읽기
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기
주요 포인트 한눈에 보기 TanStack Query에서 queryKey는 단순한 캐시 이름이 아니라, 서버 데이터를 계층적으로 분류하기 위한 구조적 기준입니다. 이 글에서는 queryKey를 배열로 설계해야 하는 이유를 사용법이 아닌 구조·설계 관점에서 정리합니…
더 읽기
둘 다 상태를 다루는 도구처럼 보여 API 데이터까지 Zustand에 넣거나, 모달 상태까지 Query로 관리하려는 혼란이 생깁니다. 둘 다 상태를 다루지만 출발점이 다릅니다 TanStack Query와 Zustand는 모두 화면의 값을 다룬다는 점에서 비슷해 보…
더 읽기