데브허브 | DEVHUB | Simple As Possible TanStack Query Tutorial (React Query)Simple As Possible TanStack Query Tutorial (React Query)
- TanStack Query (React Query)는 React SPA에서
useEffect 없이 데이터 페칭을 간소화하며, 복잡한 캐싱 요구사항을 쉽게 처리합니다. ✨
- 설치 후, 앱 전체를
QueryClientProvider로 감싸고 QueryClient 인스턴스를 제공하여 전역적인 캐싱 및 상태 관리를 가능하게 합니다. 🌐
- 각 컴포넌트에서는
useQuery 훅을 사용하여 데이터를 가져오며, queryKey로 고유 식별자를, queryFn으로 실제 페칭 함수를 정의합니다. 🔑
useQuery는 데이터 로딩(isPending), 에러(isError), 성공(data) 상태를 자동으로 관리하여 개발자가 직접 처리할 필요가 없습니다. 🔄
- 기본적으로 TanStack Query는 캐시된 데이터를 즉시 표시하고, 동시에 백그라운드에서 최신 데이터를 가져와 UI를 부드럽게 업데이트합니다. 🚀
staleTime 옵션을 사용하여 데이터가 '오래되었다'고 간주되기 전까지의 시간을 밀리초 단위로 설정할 수 있으며, 이 시간 동안은 백그라운드 페칭이 발생하지 않습니다. ⏳
gcTime (Garbage Collection Time) 옵션은 캐시된 데이터가 얼마나 오랫동안 저장될지 제어하며, 0으로 설정하면 데이터가 즉시 캐시에서 제거됩니다. 🗑️
staleTime은 백그라운드 리페칭 시점을, gcTime은 캐시 저장 기간을 결정하여, 각 페이지의 특성에 맞는 최적의 캐싱 전략을 구현할 수 있습니다. 💡
useEffect를 사용하는 것에 비해 훨씬 간결하고 강력한 데이터 관리 및 캐싱 기능을 제공하여 개발 생산성과 사용자 경험을 크게 향상시킵니다. 💪