tanstack-query-모범-사례은(는) 무엇을 하나요?
데이터 가져오기, 캐싱, 변이 및 서버 상태 관리를 위한 TanStack Query(React Query) 모범 사례. 서버 상태를 사용하는 데이터 기반 React 애플리케이션을 구축할 때 활성화하세요.
개요
TanStack Query는 React 애플리케이션에서 서버 상태를 쉽게 관리할 수 있게 해주는 강력한 라이브러리입니다. 이 가이드는 실제 프로젝트에서 적용할 수 있는 핵심 모범 사례를 다룹니다.
주요 모범 사례
1. 쿼리 키 설계
- 쿼리 키는 일관된 구조를 가져야 합니다.
- 예를 들어,
['todos', { status: 'done' }]와 같이 배열로 계층화합니다. - 키는 고유하고 예측 가능해야 캐싱 및 무효화가 용이합니다.
2. 데이터 가져오기
useQuery훅을 사용하여 서버에서 데이터를 가져옵니다.staleTime을 설정하여 데이터가 신선하다고 간주되는 시간을 조정합니다.refetchOnWindowFocus같은 옵션으로 사용자 경험을 최적화합니다.
import { useQuery } from '@tanstack/react-query';
function useTodos() {
return useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
staleTime: 1000 * 60 * 5, // 5분
});
}
3. 변이 (Mutations)
useMutation을 사용하여 데이터 변경 작업을 처리합니다.onSuccess콜백에서 관련 쿼리를 무효화하여 UI를 최신 상태로 유지합니다.- 낙관적 업데이트(optimistic updates)를 사용해 UX를 개선할 수 있습니다.
import { useMutation, useQueryClient } from '@tanstack/react-query';
function useAddTodo() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: addTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] });
},
});
}
4. 캐싱 전략
cacheTime을 조정하여 메모리 내 캐시 지속 시간을 관리합니다.- 쿼리가 더 이상 사용되지 않을 때 가비지 컬렉션됩니다.
keepPreviousData옵션으로 페이지네이션에서 부드러운 전환을 제공합니다.
5. 오류 처리
useQuery와useMutation에서 반환되는error객체를 활용합니다.onError콜백을 통해 글로벌 오류 핸들러를 구현할 수 있습니다.- 에러 바운더리(Error Boundaries)와 통합할 수도 있습니다.
권장 설정
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60, // 1분
retry: 1,
refetchOnWindowFocus: false,
},
},
});
참고 자료
이 모범 사례를 따르면 애플리케이션의 데이터 흐름이 더 예측 가능하고 유지보수하기 쉬워집니다.