Tanstack Query란?

서버 상태 관리는 현대 웹 애플리케이션에서 필수적입니다. Tanstack Query(구 React Query)는 이를 간단하고 강력하게 해결해줍니다.

핵심 개념

1. useSuspenseQuery

Suspense와 함께 사용하여 로딩 상태를 자연스럽게 처리합니다.

import { useSuspenseQuery } from '@tanstack/react-query';

function Posts() {
  const { data } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  return (
    <div>
      {data.map((post) => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

2. 자동 캐싱 및 동기화

• 백그라운드에서 자동으로 데이터를 최신 상태로 유지
• 중복 요청 자동 제거
• 옵티미스틱 업데이트 지원

실전 팁

// 전역 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1분
      gcTime: 5 * 60 * 1000, // 5분
    },
  },
});

결론

Tanstack Query를 사용하면 서버 상태 관리가 정말 쉬워집니다. Redux나 MobX 없이도 충분히 강력한 상태 관리를 구현할 수 있습니다.