<aside> ➡️

</aside>

TanStack Query란?

TanStack Query

웹 앱에서 서버 상태를 효율적으로 관리하기 위한 라이브러리

서버 상태 가져오기, 캐싱, 동기화, 업데이트를 보다 쉽게 다룰 수 있도록 도와준다.

TanStack Query 설치 및 세팅

yarn add @tanstack/react-query

import { RouterProvider } from 'react-router-dom';
import router from './routes/Router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const App = () => {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
		  <RouterProvider router={router} />
    </QueryClientProvider>
  );
};

export default App;

TanStack Query의 캐싱 원리

캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것을 말한다. 이를 통해 반복적인 비동기 데이터 호출을 방지하고, 불필요한 API 요청을 줄여 서버에 대한 부하를 감소시킨다.

💡 데이터의 최신성 판단 방법

캐싱된 데이터가 최신 데이터인지 그 여부는 어떻게 판단할 수 있을까?

TanStack Query에서는 이를 **fresh(신선한 데이터)**와 **stale(오래된 데이터)**로 구분합니다.