<aside> 💡 React-Query 의 기본 설치 방법을 알아보자!

</aside>

기본적으로 create-react-app 또는 vite 를 이용해서 프로젝트를 생성한 뒤 리액트 쿼리를 설치하면 된다.

리액트 쿼리 설치하기

npm install @tanstack/react-query

// App.js

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import HomePage from "./HomePage";

const queryClient = new QueryClient();

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

export default App;

QueryClientProvider 를 통해 App 컴포넌트의 자손 컴포넌트에 전달해 줄 수 있다. QueryClient 로 새로운 쿼리 클라이언트를 만들어 지정해준다.

리액트 쿼리 개발자 도구

리액트 쿼리를 개발할 때, 유용한 DevTools 이다.

npm install @tanstack/react-query-devtools

코드를 추가하여 DevTool 을 사용할 수 있게 한다.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import HomePage from "./HomePage";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HomePage />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

ReactQueryDevtools 를 import 해주고 나서 컴포넌트를 지정해주면 된다.

Untitled

아이콘이 생성되어 클릭하면 개발자 도구가 뜬다.

Untitled