1. 개요

서버 상태 데이터를 다루는 방법

서버에서 데이터를 받아오는데 걸리는 시간을 컨트롤하고 데이터가 로딩되는 시간동안 보여질 것들과 에러에 대한 처리를 해야한다.

리액트 쿼리는 데이터를 가져오는 과정에서 로딩과 에러 처리를 쉽게 구현할 수 있도록 여러 값을 제공해 주고, 정해진 시간 혹은 조건마다 서버 상태 데이터를 최신으로 가져오는 작업도 알아서 해준다. 또한 캐시를 사용해서 매번 서버에서 데이터를 가져올 필요 없이 유저에게 더 빠르게 데이터를 보여주기도 한다.

2. 세팅하기

1) 설치

npm install @tanstack/react-query

최신버전의 리액트 쿼리

2) 기본 세팅

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;

Context와 같이 전역적으로 사용하기 위해 Provider로 크게 감싸준다.

3) 개발자 도구 설치

npm install @tanstack/react-query-devtools

4) 개발자 도구 세팅

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은 리액트 쿼리 개발자 도구가 열려있는 채로 실행할 것인가를 선택하는 옵션