Fetch, cache and update data in your React and React Native applications all without touching any "global state".
React 어플리케이션에서 서버의 상태
를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리다.
다른것이다. react-query는 서버
상태를 다루는 라이브러리이고,
redux, mobx 등은 클라이언트
상태를 다루는 라이브러리다.
아니다. fetch와 axios는 실제 api 요청을 수행하여 직접 리소스를 불러오는 라이브러리인 반면, react-query는 api를 통해 불러온 서버의 상태를 내부적으로 캐싱하고 동기화하는 등 잘 사용할 수 있게 도와주는 라이브러리이다.
[React-Query 문서]에서 말하는 서버 상태는 다음과 같은 특징이 있다.
위 같은 특징이 있기 때문에 서버 상태를 관리하게 되면
다음과 같은 문제들에 직면할 수 있는데,
이러한 React-Query 라이브러리를 사용하면 추가적인 리소스 소모 없이 위 문제들을 해결할 수 있다.
QueryClientProvider컴포넌트를 통해 어플리케이션에 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")
);
useQuery hook은 데이터 페칭과 관련된 훅으로 API 로딩여부, Response Data, Error등 을 반환한다.
const result = useQuery(queryKey, queryFn?, 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>
);
}
useMutation은 Read를 목적으로하는 useQuery와 달리 Create, Update, Delete에 사용된다.
const result = useMutation(mutationFn, options?)