[React] React Query

React Query는 데이터 Fetching, 캐싱, 동기화, 업데이트, 에러핸들링 등 비동기 과정을 쉽게 만들어 주는 React 라이브러리입니다. React Query를 사용하면 기존의 서버 데이터를 가져오거나 업데이트하는 코드를 축약할 수 있고 캐싱 처리가 간단해졌습니다.

 

간단하게 useQuery를 사용하여 코인들의 정보를 조회하는 코드를 통해 React Query 사용 전 후를 비교하였었습니다.

설치

$ npm i react-query
or
$ yarn add react-query

useQuery

• 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 포함)와 함께 사용할 수 있습니다.
• 첫 번째 파라미터는 unique Key이고, 두 번째는 비동기 함수(api호출 함수)입니다.
• return 개체에는 api의 로딩상태, 성공, 실패여부, 결과 데이터를 포함한 객체입니다.

React Query 사용 전

코인들의 정보를 조회하는 코드입니다. useState를 사용하여 코인 데이터와 조회 상태를 따로 관리하였었습니다.

// Coins.tsx
import { useEffect, useState } from 'react';

interface ICoin {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

function Coins() {
  const [coins, setCoins] = useState<ICoin[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    (async () => {
      const response = await fetch('https://api.coinpaprika.com/v1/coins');
      const json = await response.json();
      setCoins(json.slice(0, 100));
      setLoading(false);
    })();
  }, []);

  return (
    ...
  );
}

export default Coins;

React Query 사용 후

먼저 React Query를 사용하도록 세팅합니다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

코인들의 정보를 조회하는 코드를 별도 파일을 생성하여 관리합니다.

// api.ts
export function fetchCoins() {
  return fetch('https://api.coinpaprika.com/v1/coins').then((reponse) => reponse.json());
}

React Query를 사용하기 전과 비교하면 많은 코드가 제거된 것을 확인할 수 있습니다.

import { useQuery } from 'react-query';
import { fetchCoins } from '../api';

interface ICoin {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

// coins.tsx
function Coins() {
  const { isLoading, isError, data } = useQuery<ICoin[]>('allCoins', fetchCoins);
  return (
    ...
  );
}

export default Coins;

useQuery 파라미터와 결과 값을 아래와 같이 변형해서 사용할 수 있습니다.

const { isLoading: infoLoding, data: infoData } = useQuery<InfoData>(['info', coinId], () =>
  fetchCoinInfo(coinId as string)
);

Devtools

React Query는 query 데이터를 시각화 하기 위해서 Devtools(Developer Tools, 개발자도구)를 기능을 가지고 있습니다.

// App.tsx
import { ReactQueryDevtools } from 'react-query/devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

• initialIsOpen: 개발자도구가 기본적으로 열려 있도록 하려면 true로 설정

참고

• https://react-query-v3.tanstack.com/overview