[TanStackQuery] TanStackQuery 설치하기 [7/23 study]

TanStackQuery 설치하기

 

1. npx create-react-app .
2. npm install @tanstack/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;

 

QueryClientProvider를 통해 App 컴포넌트의 자손 컴포넌트에 전달해 주었는데요.

React Context를 배울 때 리액트 Context에서도 데이터를 전역적으로 사용하기 위해서 먼저 Context Provider를 설정해 줬었는데 마찬가지로 리액트 쿼리를 사용하려면 쿼리 클라이언트를 제공하는 Context Provider를 설정해 줘야 합니다.

 

 

리액트 쿼리 개발자 도구(React Query Devtools)

npm install @tanstack/react-query-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로 하겠습니다.

터미널에서 npm run start를 입력해 앱을 실행해 봅시다. 그러면 다음과 같이 오른쪽 아래에 플로팅 버튼이 떠 있는 것을 볼 수 있습니다.