[React] 리액트 쿼리 사용하기

React Query란?

리액트 애플리케이션에서 서버의 state 가져오기, 캐싱, 동기화, 업데이트를 쉽게 구현할 수 있게 도와주는 리액트 라이브러리이다.

React Query 사용 이유

리액트에서 state를 관리하는 라이브러리들은 비동기 작업에 친화적이지 않다. 이는 클라이언트의 state와 서버의 state 형태가 다르기 때문이다.

서버 State 특징

• 원격에 위치
• 다른 누군가가 변경할 수 있음
• 가져오거나 업데이트하기 위해서는 API를 사용해야 함
• 기한이 지난 데이터일 수 있음

React Query 사용 방법

기본 세팅

React Query를 설치한다.
npm install react-query

(index.jsx)

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// react-query
import { QueryClient, QueryClientProvider } from 'react-query';
// Create a client
const client = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // client 제공
  <QueryClientProvider client={client}>
    <App />
  </QueryClientProvider>
);

App.jsx에 바로 적용해도 된다.

(App.jsx)

// react-query
import { QueryClient, QueryClientProvider } from 'react-query';
// client 생성
const queryClient = new QueryClient()

function App() {
  return (
    // client 제공
    <QueryClientProvider client={queryClient}>
      <Component />
    </QueryClientProvider>
  )
}

useQuery

(App.tsx)

import { useQuery } from 'react-query';

const App = () => {
  const { ... } = useQuery(
    queryKey, 
    queryFunction, 
    options
  );
  
  return (
	...
  );
}

(📎 useQuery 자세한 정보)

• queryKey : 캐싱된 데이터 관리를 위한 key 값, Array 형태도 가능하다.
• queryFunction : Promise를 반환하는 함수
• options : 여러 옵션들

예제

import { useQuery } from 'react-query';

const App = () => {
  // Promise 반환하는 비동기 함수
  const getProducts = async (): Promise => 
 	 await (await fetch('https://fakestoreapi.com/products')).json();

  const { data, isLoading, error } = useQuery(
    'products',
    getProducts
  );
  
  // 로딩중이라면
  if (isLoading) return <LinearProgress />
  // 에러라면
  if (error) return <div>Somthing went wrong...</div>
  
  return (
  	...
    
    // 가져온 데이터 매핑
    {data?.map(item => (
       <Item item={item} />
     ))}
  );
}