[React] React Query 설정하기

React Query

---

리액트 애플리케이션의 데이터를 크게 내부에서 유지되는 데이터와 API 서버에서 발생하는 외부 데이터로 구분되는데 React Query는 주로 외부에서 만들어진 데이터를 관리하는데 도움이 되는 라이브러리

 

React Query의 가장 중요한 특징은 데이터를 일정 시간 동안 보관하는 캐싱 기능으로 단순히 데이터를 보관하는 기능이 아니라 일정 시간이 지나면 새로 서버에서 호출하도록 구현할 수 있음

 

[React Query 설정]

npm i @tanstack/react-query
npm i @tanstack/react-query-devtools

npm을 통해 React Query 5 버전과 편리한 개발을 위해 devtools도 추가

 

package.json

import { RouterProvider } from "react-router-dom";
import root from "./router/root";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>

      <RouterProvider router={root}/>

      <ReactQueryDevtools initialIsOpen={true} />

    </QueryClientProvider>
  );
}

export default App;

App.js에 React Query의 QueryClient를 지정

QueryClient는 캐싱의 핵심 객체로 쿼리 클라이언트 인스턴스를 생성하고, 이를 통해 애플리케이션 전반에서 데이터를 가져오고, 캐싱하고, 동기화하는 기능을 제공

initiallsOpen 속성은 애플리케이션 구동 시 개발도구를 오픈한 상태에서 시작하도록 함