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 공식문서
