React Query 기본설정

React Query 라이브러리를 사용하여 데이터 가져오기와 관리하기 위해 기본적인 설정을 해야한다.

1. QueryClient 및 QueryClientProvider 불러오기

import { QueryClient, QueryClientProvider } from 'react-query';

• QueryClient
  데이터를 캐시하고 관리하는 React Query의 핵심 클래스
  주로 서버에서 비동기 데이터를 가져오고 캐싱하기 위한 도구로 사용

• QueryClientProvider
  애플리케이션 내에서 QueryClient를 사용할 수 있도록 컨텍스트를 제공하는 컴포넌트

2. QueryClient 인스턴스 생성

const queryClient = new QueryClient();

이 인스턴스를 통해 React Query의 모든 기능을 활용할 수 있게 해줌

• 쿼리의 캐싱, 데이터 관리, 백그라운드 데이터 업데이트 등을 수행

3. QueryClientProvider 컴포넌트 사용

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

React 컴포넌트 트리의 최상위에 위치해야 하기 때문에 앱의 진입점 파일(App.js, index.js 등)에서 사용되는 것이 일반적

client prop을 사용하여 QueryClient 인스턴스를 제공
-> 앱의 모든 컴포넌트에서 React Query를 사용 가능

생각해 볼 점

QueryClientProvider 와 RecoilRoot 중 어떤 것이 상위에 위치해야하는가?

QueryClientProvider가 더 상위에 위치하는 것이 일반적이다.

• React Query는 데이터 가져오기와 관리에 특화된 라이브러리로서, 데이터의 일관성을 유지하고 데이터 흐름을 효과적으로 관리하기 위해 주로 상위에 두는 것이 편리하다.
• React Query는 데이터 가져오기와 캐싱에 주력하는 라이브러리이고, Recoil은 로컬 및 전역 상태 관리에 사용되는 상태 관리 라이브러리이기 때문에 React Query를 먼저 사용하고, Recoil을 사용하는 것이 일반적이다.