React-Query

React-Query는 React 애플리케이션에서 서버의 데이터 가져오기 및 관리를 용이하게 해주는 라이브러리이다. 서버에서 데이터를 가져오는 작업을 추상화하고, 결과를 캐시에 저장하거나, 데이터를 최신 상태로 업데이트 하기도 한다.

React-Query의 특징

캐시

React-Query는 결과를 캐시할 수 있기 때문에 매번 서버에서 데이터를 다시 가져오는 작업을 반복하지 않아도 된다. 이는 네트워크 비용을 절감하면서도, 요청을 줄이기 때문에 애플리케이션의 성능을 향상시킨다.

간편함

캐시에서 이어지는 장점으로, React-Query를 사용하는 것만으로 비동기 처리의 많은 부분을 알아서 작업해준다. 예를들어 요청이 있을 때 캐시에 이미 데이터가 존재한다면 그 데이터를 결과로 반환한다. 만약 캐시에 저장했던 데이터가 업데이트 되는 요청이 있었다면 알아서 업데이트한 데이터를 가져와 다시 캐시에 저장한다. 또한 리렌더링을 통해 동일 요청을 요청하게 되어도 한번만 요청하도록 만들어주기도 한다.

Loading, error, data

React-Query를 사용하면 Loading, error, data와 같은 상태에 대한 처리도 손쉽게 가능하다. 예를 들어, useQuery 훅을 사용하여 데이터를 가져올 때, isLoading, error, data와 같은 상태를 찾아 선언적으로 사용할 수 있습니다. 이를 통해 데이터를 가져오는 과정에서 수행해야 하는 에러나 로딩, 성공 상황을 손쉽게 분기 처리할 수 있다. useState 와 비슷하게 선언된 데이터가 새롭게 업데이트 되는 경우, 리렌더링이 이루어지기 때문에 기존 리액트 훅을 사용해본 개발자에게 친숙하다는 이점도 존재한다.

useQuery

useQuery는 React-Query에서 가장 많이 사용되는 훅으로, 이를 사용하여 쉽게 데이터를 가져오고 관리할 수 있다. useQuery를 사용하면 React-Query가 자동으로 캐시를 검색하고 그 결과를 반환한다.

staleTime

staleTime은 데이터가 최신상태로 있을 수 있는 시간을 정의한다. stateTime 이 채워지기 전까지는 새로운 요청이 일어나더라도 서버에게 요청을 보내지 않는다. 이 과정의 데이터를 fresh 상태라 하며 stateTime 이 모두 채워지면 데이터는 stale 상태가 된다. stale 상태의 데이터는 더이상 최신의 데이터라 판단하지 않으며, 요청이 있는 경우 서버에게 요청을 보내 새로운 최신 결과값을 캐시에 저장한다. 기본 값은 0 이다.

cacheTime

cacheTime은 캐시된 데이터를 저장할 시간을 정의한다. 캐시 시간이 끝나면 새로운 요청을 통해 새로운 캐시 값으로 데이터를 저장하게 된다. 이전의 캐시 데이터는 가비지 콜렉터에 의해 자연스럽게 삭제된다. 이러한 과정으로 사용자의 캐시 데이터를 효율적으로 쓰게 설정하는 것이 가능하다. 기본 값은 5분 이다.

import { useQuery } from 'react-query';

function Users() {
  const { isLoading, error, data, refetch } = useQuery('users', fetchUsers, {
    staleTime: 1000 * 60 * 10, // 10분 동안 stale 상태로 둔다.
    cacheTime: 1000 * 60 * 60, // 1시간 동안 캐시된 데이터를 유지한다.
  });

  if (isLoading) return 'Loading...';

  if (error) return `Error: ${error.message}`;

  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

refetch

refetch는 사용자가 직접 요청을 보내 데이터를 가져오지 않아도, 자동으로 캐시된 데이터를 업데이트하는 기능입니다. 예를 들어, 사용자가 특정 작업을 수행하고 데이터베이스를 업데이트하는 경우, refetch 를 통해 강제적으로 서버에 요청을 보내게 하여 최신 데이터를 캐시에 저장하도록 도와준다.

useMutation

useMutation 훅은 React-Query에서 데이터를 수정하고 업데이트하는 데 사용된다. 이 훅을 사용하여 API를 호출하고, 서버의 응답 및 데이터를 캐시에 업데이트 할 수 있다. useQuery와 마찬가지로, isLoading, error, data, isSuccess와 같은 상태를 반환한다.

mutate, mutateAsync

useMutation 훅을 사용하여 데이터를 업데이트하는 데 사용한다. mutate 는 서버에 데이터를 수정하는 요청을 보내고, mutateAsync 는 비동기 처리를 통해 서버에서 데이터를 업데이트한다. 이를 통해 간편하게 데이터를 업데이트하고, 캐시를 관리할 수 있다.

import { useMutation } from 'react-query';

function UpdateUserName() {
  const [mutate, { isLoading, error, data }] = useMutation((newUserName) =>
    fetch('<https://api.example.com/user>', {
      method: 'PUT',
      body: JSON.stringify({ name: newUserName }),
    }).then((res) => res.json())
  );

  const handleUpdateUserName = () => {
    mutate('John Doe');
  };

  if (isLoading) return 'Loading...';

  if (error) return `Error: ${error.message}`;

  return (
    <div>
      <button onClick={handleUpdateUserName}>Update User Name</button>
      {data && <div>New user name: {data.name}</div>}
    </div>
  );
}

참고
[React-Query] 리액트로 비동기 다루기
[React] React-Query - QueryClient stale & cacheTime
react-query 개념 및 정리
React-query로 비동기 통신 관리