TanStack Query ( React Query )

다양한 프레임 워크에서 서버 상태를 관리하고 데이터 페칭을 간소화 하기 위한 라이브러리
데이터를 가져오기, 캐싱, 동기화, 업데이트 작업을 효율적으로 처리

특징

• 데이터 패칭 관리
  • REST API, GraphQL, WebSocket 등을 통해 데이터를 쉽게 가져올 수 있음
  • 로딩, 성공, 실패를 자동으로 관리함
• 캐싱
  • 가져온 데이터를 캐싱해 동일한 데이터를 여러 번 요청하지 않도록 최적화함
  • StaleTime 및 cacheTime을 기반으로 관리
• 자동 리페치
  • 데이터가 오래된 상태(stale) 되면 자동으로 다시 가져옴
  • 창 초점 복귀나 네트워크 재연결 시 데이터를 자동으로 업데이트 가능
• 여러 데이터를 병렬로 가져오거나, 특정 조건이 충족될 때만 데이터를 가져오는 기능을 제공함
• 무한 스크롤, 페이징을 간단히 구성 가능
• 실시간으로 캐시 상태를 확인 가능한 DevTool 제공
• React, Vue, Solid, Svelte 등 다양한 프레임 워크와 호환됨

필요성

• 서버 상태 관리의 복잡성 해결
  • 데이터 캐싱 및 동기화
  • API 요청 및 응답 상태 관리
  • 재요청 타이밍 결정
• 데이터 관련 문제 자동 처리
  • 네트워크 끊김 복구
  • 데이터 업데이트 및 동기화
  • 무효화 및 갱신 전략 관리

주요 개념

• Query
  데이터를 가져오고 캐시 관리에 사용됨 useQuery 훅을 통해 사용 가능

   const { data, isLoading, error } = useQuery(['todos'], fetchTodos);

• Mutation
  데이터를 업데이트 하거나 서버에 변경 요청을 보낼 때 사용됨 useMuation 훅을 통해 사용 가능

  const mutation = useMutation(addTodo, {
   onSuccess: () => queryClient.invalidateQueries(['todos']),
  });
  
  mutation.mutate(newTodo);

• Query Keys
  데이터를 고유하게 식별하는 키. 캐시 데이터를 구분하고 관리하기 위해 사용됨

  useQuery(['user', userId], fetchUser);
  

• Query Client
  전역적으로 쿼리 상태를 관리하는 핵심 객체. 캐시 설정 및 무효화를 제어함

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  
  const queryClient = new QueryClient();
  
  <QueryClientProvider client={queryClient}>
   <App />
  </QueryClientProvider>;

장점

• 코드의 단순화 : 서버 상태를 관리하는 복잡한 코드 작성이 줄어듬
• 자동화된 데이터 관리 : 캐싱, 갱신, 무효화 자동 처리 및 데이터 라이프사이클 제어
• 성능 최적화 : 캐시를 활용한 네트워크 요청 감소, 병렬 패칭 및 프리패칭 지원
• 유연성 : 다양한 상황에 적합한 설정 가능

핵심 과정

쿼리요청 → 캐시관리 → 자동갱신 (staleTime)