설치법

나는 일단 vite로 react를 설치 후
리액트 쿼리를 설치했다.

npm install @tanstack/react-query

터미널에 이렇게 입력하면 react 쿼리가 설치된다.

src/page/Home.jsx

function HomePage() {
  return <div>홈페이지</div>;
}

export default HomePage;

src/App.jsx

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;

이렇게 Home.jsx랑 App.jsx에 각각 이렇게 작성해 주었다.
App.jsx에서 <QueryClientProvider client={queryClient}> 이 부분은 react query를 사용하려면, 쿼리 클라이언트를 제공하는 Context Provider를 설정해 줘야 한다.
그것이 바로 QueryClientProvider이다.

리액트 쿼리를 사용하려면 쿼리 클라이언트를 제공하는 Context Provider를 설정해 줘야 한다.
그것이 바로 QueryClientProvider이다.
이렇게 QueryClientProvider를 통해 쿼리 클라이언트를 제공해 줘야 그 안에 있는 자손 컴포넌트에서 리액트 쿼리를 사용할 수 있게 된다.

또 QueryClient와 QeuryClientProvider를 반드시 @tanstack/react-query에서 import해와야 한다.
react-query에서 import하면 안된다.
react-query는 리액트 쿼리3버전이라고 한다.
@tanstack/react-query가 최신 버전이기 때문에@tanstack/react-query에서 import해오는 것을 지향한다.

React Query Devtools

리액트 쿼리를 사용해 개발을 할 때 매우 편리한 개발자 도구도 함께 설치해보도록 하겠다.

npm install @tanstack/react-query-devtools

터미널에 이렇게 명령한 후
리액트 쿼리 개발자 도구를 위한 코드를 추가해주자!

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

const queryClient = new QueryClient();

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

initialIsOpen은 리액트 쿼리 개발자 도구가 열러 있는 채로 실행할 것인가를 선택하는 옵션이다.
일단 false로 하겠다.
그런 다음 터미널에서 npm run dev를 입력해 앱을 실행해 보겠다.
그러면 다음과 같이 오른쪽 아래에 프로팅 버튼이 떠 있는 것을 볼 수 있다.

버튼을 클릭해 보면 개발자 도구 화면이 잘 보이는 것을 확인할 수 있다.