Server-state 라이브러리(React Query/TanStack Query, SWR, RTK Query)는 서버에서 가져온 데이터를 관리하는 데 특화되어 있습니다 — 그것을 원격 출처와 동기화해야 할 캐시로 취급합니다. 캐싱, 로딩/에러 state, refetch, 중복 제거를 자동으로 처리하여 방대한 양의 수동 코드를 대체합니다.
서버 데이터는 서버가 소유하며 클라이언트에는 단지 캐시되므로 오래될(stale) 수 있습니다. 이를 직접 관리한다는 것은 모든 엔드포인트마다 캐싱, 로딩/에러 추적, refetch, 재시도, 중복 제거를 다시 구현하는 것을 의미합니다 — 오류가 나기 쉽고 반복적입니다.
import { useQuery } from "@tanstack/react-query";
function Users() {
const { data, isLoading, error, refetch } = useQuery({
queryKey: ["users"], // 캐시 키
queryFn: () => fetch("/api/users").then(r => r.json()),
staleTime: 60_000, // 1분간 fresh로 간주
});
if (isLoading) return <Spinner />;
if (error) return <Error />;
return <List data={data} />;
}
그 단일 hook이 제공하는 것:
✓ 캐싱 — queryKey로 데이터 캐시, 컴포넌트 간 공유
✓ 로딩/에러 — isLoading/error state를 대신 관리
✓ 중복 제거 — 5개 컴포넌트의 동일 쿼리 = 단 하나의 네트워크 요청
✓ 백그라운드 refetch— 윈도우 포커스/재연결 시 refetch하여 fresh 유지
✓ stale-while-revalidate — 캐시 데이터를 즉시 표시, 백그라운드에서 refetch
✓ 재시도 — 실패한 요청 자동 재시도
✓ 페이지네이션/무한 스크롤, prefetch, 캐시 무효화
const mutation = useMutation({
mutationFn: (user) => api.createUser(user),
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // 목록 refetch
});
뮤테이션 후 관련 쿼리를 무효화하면 캐시가 refetch됩니다 — UI를 서버와 일관되게 유지합니다.
사람들이 Redux에 넣는 많은 것이 사실은 SERVER state입니다.
이를 React Query로 옮기면 글로벌 state가 진짜 UI state(테마, 모달, 필터)로
줄어드는 경우가 많아 — 앱 전체가 단순해집니다.
server-state 라이브러리는 범용 state 도구(Redux, useState)가 잘 처리하지 못하는 문제를 해결합니다: 클라이언트 캐시를 원격 데이터와 동기화하는 일입니다.
이들은 수백 줄의 수동 가져오기/캐싱/로딩 로직을 선언적 hook으로 대체하고, 직접 올바르게 만들기 어려운 정교한 동작(중복 제거, 백그라운드 refetch, stale-while-revalidate)을 제공합니다.
server state가 자체 전용 도구를 가질 자격이 있다는 것 — 그리고 그것을 채택하면 글로벌 state가 종종 극적으로 단순해진다는 것 — 을 인식하는 것은 현대 프런트엔드 아키텍처에서 가장 영향력 있는 통찰 중 하나입니다.