React Query는 데이터 Fetching, 캐싱, 동기화, 업데이트, 에러핸들링 등 비동기 과정을 쉽게 만들어 주는 React 라이브러리입니다.
React Query를 사용하면 기존의 서버 데이터를 가져오거나 업데이트하는 코드를 축약할 수 있고 캐싱 처리가 간단해졌습니다.
간단하게 useQuery
를 사용하여 코인들의 정보를 조회하는 코드를 통해 React Query 사용 전 후를 비교하였었습니다.
설치
1 2 3
| $ npm i react-query or $ yarn add react-query
|
useQuery
- 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 포함)와 함께 사용할 수 있습니다.
- 첫 번째 파라미터는 unique Key이고, 두 번째는 비동기 함수(api호출 함수)입니다.
- return 개체에는 api의 로딩상태, 성공, 실패여부, 결과 데이터를 포함한 객체입니다.
React Query 사용 전
코인들의 정보를 조회하는 코드입니다. useState
를 사용하여 코인 데이터와 조회 상태를 따로 관리하였었습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| 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를 사용하도록 세팅합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 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') );
|
코인들의 정보를 조회하는 코드를 별도 파일을 생성하여 관리합니다.
1 2 3 4
| export function fetchCoins() { return fetch('https://api.coinpaprika.com/v1/coins').then((reponse) => reponse.json()); }
|
React Query를 사용하기 전과 비교하면 많은 코드가 제거된 것을 확인할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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; }
function Coins() { const { isLoading, isError, data } = useQuery<ICoin[]>('allCoins', fetchCoins); return ( ... ); }
export default Coins;
|
useQuery
파라미터와 결과 값을 다음과 같이 변형해서 사용할 수 있습니다.
1 2 3
| const { isLoading: infoLoding, data: infoData } = useQuery<InfoData>(['info', coinId], () => fetchCoinInfo(coinId as string) );
|
React Query는 query 데이터를 시각화 하기 위해서 Devtools(Developer Tools, 개발자도구)를 기능을 가지고 있습니다.
1 2 3 4 5 6 7 8 9 10 11
| import { ReactQueryDevtools } from 'react-query/devtools';
function App() { return ( <QueryClientProvider client={queryClient}> {} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }
|
- initialIsOpen: 개발자도구가 기본적으로 열려 있도록 하려면
true
로 설정
참고