React-Query

2023. 11. 07.

서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리

개요

React-Query가 등장하기 이전에는 서버와의 API 통신과 비동기 데이터 관리에 Redux가 주로 사용되었다. (redux-thunk, redux-saga 등)

그러나 Redux는 Boilerplate 코드가 장황하고, API 요청 수행에 규격화된 방식이 부족한 등의 단점이 있었다.

반면 React-Query는 다음과 같이 장점을 가지고 있다.

React-Query는 GET 요청의 경우 useQuery 를 사용하여 처리하고, POST, PUT, DELETE와 같이 서버에 Side Effect를 발생시키는 경우 useMutation 을 사용하여 처리한다.

세팅

$ npm i @tanstack/react-query
$ npm i -D @tanstack/react-query-devtools

import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import App from './App';

const queryClient = new QueryClient();

root.render(
	<QueryClientProvider client={queryClient}>
		<App />
		<ReactQueryDevtools />
	</QueryClientProvider>
);

useQuery

예제

const getMentors = async () => {
  try {
    const res = await api.get('/main');
    return res.data;
  } catch (err) {
    console.error(err);
  }
};

const { data, isLoading, isError } = useQuery('mentors', getMentors, {
	refetchOnWindowFocus: false,
});

if (isLoading || isError) return <Loading />;

return (
    <div>
	    {filteredData.map((el) => (
		    <MentorCard el={el} />
	    ))}
    </div>
  );

첫 번째 파라미터: query key (unique key)

두 번째 파라미터: 요청을 수행하기 위한 함수

세 번째 파라미터(Optional): option 객체

Return

useMutation

예제

const { mutate } = useMutation(
    (mentor) => axios.post('/mentors', { mentor }),
    {
      onSuccess: () => queryClient.invalidateQueries('mentors'),
    },
  );

...

      <button
        onClick={() =>
          mutate({
            id: Date.now(),
            name: '장경은',
          })
        }
      >
        장경은
      </button>

첫 번째 파라미터: 요청을 수행하기 위한 함수

두 번째 파라미터(Optional): POST 통신이 완료되면 할 행동. 예제에서는 POST 요청이 성공하면 위 useQuery의 데이터를 초기화한다. 데이터가 초기화되면 useQuery는 서버의 데이터를 다시 불러온다.

Return