[React] React-Query 라이브러리 살펴보기

React-Query란?

Fetch, cache and update data in your React and React Native applications all without touching any "global state".

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

🤔 Redux, Mobx와는 다른것인가?

다른것이다. react-query는 서버 상태를 다루는 라이브러리이고,
redux, mobx 등은 클라이언트 상태를 다루는 라이브러리다.

🤔 fetch와 axios를 대체하는 것인가?

아니다. fetch와 axios는 실제 api 요청을 수행하여 직접 리소스를 불러오는 라이브러리인 반면, react-query는 api를 통해 불러온 서버의 상태를 내부적으로 캐싱하고 동기화하는 등 잘 사용할 수 있게 도와주는 라이브러리이다.

서버 상태란?

[React-Query 문서]에서 말하는 서버 상태는 다음과 같은 특징이 있다.

• 서버 상태는 사용자가 제어하거나 소유하지 않는 위치에서 원격으로 유지된다.
• 서버 상태에는 페칭과 업데이트를 위한 비동기 API가 필요하다.
• 서버 상태는 공유 소유권을 의미하며 사용자 모르게 다른 사람들이 변경할 수 있다.
• 주의하지 않으면 서버 상태가 애플리케이션에서 잠재적으로 "오래된(out of date)" 상태가 될 수 있다.

위 같은 특징이 있기 때문에 서버 상태를 관리하게 되면
다음과 같은 문제들에 직면할 수 있는데,

• 캐싱
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 상태 최신화를 위해 백그라운드에서 오래된 데이터 업데이트
• 데이터가 오래된 경우 파악
• 데이터 업데이트를 최대한 빨리 반영
• 페이지네이션과 lazy loading과 같은 성능 최적화
• 서버 상태의 메모리 관리와 가비지 콜렉션
• ...

이러한 React-Query 라이브러리를 사용하면 추가적인 리소스 소모 없이 위 문제들을 해결할 수 있다.

사용방법

1. QueryClient정의

QueryClientProvider컴포넌트를 통해 어플리케이션에 QueryClient를 연결하고 제공한다.

• QueryClient는 캐시와 상호작용하는데 사용된다.
• useQueryClient hook을 QueryClientProvider의 client prop으로 전달한 QueryClient 인스턴스에 접근할 수 있다.

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";

import App from "./App";

const queryClient = new QueryClient();

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

2. useQuery, useMutation hook 사용

2.1. useQuery

useQuery hook은 데이터 페칭과 관련된 훅으로 API 로딩여부, Response Data, Error등 을 반환한다.

const result = useQuery(queryKey, queryFn?, options?)

• queryKey: 각각의 쿼리를 식별하는 키
• queryFn: 데이터 페칭 함수 (비동기 테스크를 실행하여 Promise를 반환하는 함수)
• options: 각종 옵션을 전달

옵션을 통해 데이터 페칭 여부, 데이터 페칭 성공과 실패 시 로직 설정, placeholderData 설정, 캐싱 시간 등을 결정할 수 있다.

function Example() {
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    fetch(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.json())
  );

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

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

2.2. useMutation

useMutation은 Read를 목적으로하는 useQuery와 달리 Create, Update, Delete에 사용된다.

const result = useMutation(mutationFn, options?)

• mutationFn: 비동기 테스크를 실행하여 Promise를 반환하는 함수
• options: 각종 옵션을 전달

Refs 공식문서

https://if.kakao.com/session/118

https://yrnana.dev/post/2021-08-21-react-query-redux