[React-query] 설치하기

🏷️ React-query 설치하기

React-query 설치를 위한 명령어는 다음과 같다.

npm install @tanstack/react-query

React-query 기본적인 사용 방법은 다음과 같다.

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;

React-query를 사용하려면 Query Client를 제공하는 Context Provider를 설정해 줘야 하는데, 그것이 바로 QueryClientProvider이다.

이렇게 QueryClientProvider를 통해 Query Client를 제공해 줘야 그 안에 있는 자손 컴포넌트에서 React-query를 사용할 수 있게 된다.

💡 import 할 때, react-query가 아닌 @tanstack/react-query에서 했는지 반드시 확인하자.

🏷️ React Query Devtools 설치하기

설치를 위한 명령어는 다음과 같다.

npm install @tanstack/react-query-devtools

Devtools는 다음과 같이 코드를 추가해주면 된다.

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;

initialIsOpen은 리액트 쿼리 개발자 도구가 열려있는 채로 실행할 것인가를 선택하는 옵션인데, 일단은 false로 해두겠다.

개발 서버를 열었을 때, 아래와 같이 플로팅 버튼이 확인된다면, 성공적으로 세팅을 완료한 것이다.