React Query란?

https://react-query.tanstack.com/

React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리

설치

npm i react-query

스타트

React Query 를 사용하기 위해선 먼저 queryClient 를 만들어야 한다.

그 다음에는 Provider 를 만들어야한다.

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

const queryClient = new QueryClient(); // 1

function App() {
	return (
      <QueryClientProvider client={queryClient}>
      	// 2
      	<Components />
      </QueryClientProvider>
    )  
}

Provider 내부에 있는 컴포넌트들은 QueryClient 에 접근할 수 있다.

이제 React Query 를 사용할 준비를 마쳤다.

본격적으로 사용하기전에 React Query 는 어떤 부분을 도와주는걸까?

우리가 데이터를 fetch 해 온 다음 state에 저장할 때 보통 다음과 같이 코드를 작성한다.

const [data, setData] = useState(); // fetch 해 온 데이터를 위한 state

useEffect(() => {
      (async () => {
      const response = await fetch(url);
      const json = await response.json();
      setCoins(json);
    })(); 
}, [])

React Query 를 사용하면 위 코드를 좀 더 간결하게 작성할 수 있다.

그러면 위에 간단하게 써 놓은 코드를 가지고 React Query 적용 예시를 한번 보도록 하자.

우선 첫번째로 fetcher 함수를 만들어야한다.
fetcher 는 위 코드에서 이 부분을 의미한다.

const response = await fetch(url);
const json = await response.json();

그리고 fetcher 함수는 반드시 fetch promise 를 반환 해주어야 한다.

이제 fetcher 함수의 생김새를 보자.

async / await 사용 :

const async fetchDatas() {
  const response = await fetch(url);
  const json = await response.json();
  
  return json;
}

promise 사용 :

const fetchDatas() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
    response.json()
  );
}

여기까지해서 API를 fetch하고 json을 반환하는 함수를 만들었다.

이제 useQuery 라는 훅을 사용해볼것이다.
useQuery 는 react-query 에서 제공하는 훅이다.

import { useQuery } from "react-query";

const App = () => {
	useQuery("queryKey", fetchDatas);
}

useQuery 는 두 개의 매개변수를 받는데, 첫 번째는 queryKey 라고 하는 매개변수다.

React Query 는 쿼리 키를 기반으로 쿼리 캐싱을 관리

두 번째 매개변수는 fetcher 함수이다.

그리고 useQuery 는 isLoading 이라는 boolean 타입의 값을 반환 하는 특징도 가지고 있다.
그래서 다음과 같이 코드를 작성해볼 수 있다.

import { useQuery } from "react-query";

const App = () => {
	const { isLoading } = useQuery("queryKey", fetchDatas);
}

isLoading 이 하는 역할은 이름에서부터 유추할 수 있듯이 로딩과 관련한 값이다.

우리가 보통 데이터를 fetch 받을 때, loading state를 만들고, 다 받아오면 loading state를 false로 바꾸잖아? 그거다.

그리고 fetch가 끝나고 받아온 데이터를 확인해야하는데 그건 어떻게 할까?

import { useQuery } from "react-query";

const App = () => {
	const { isLoading, data } = useQuery("queryKey", fetchDatas);
}

data를 추가해주면된다.

그러면 알아서 loading 이 끝나면, data에 fetch 받아온 data들이 들어간다.

state 여러개 만들고, useEffect 안에서 데이터 패치하고, setState 함수로 받아온 데이터를 저장하고, loading state 도 false 로 바꿔주고.. 하는 것들이 저 코드 한줄로 끝났다.

정말 편리하군!

그리고 또 놀라운 점은 React Query 는 fetch 받은 데이터를 캐시에 저장해둔다.

그래서 다른 페이지 갔다가 다시 돌아와도 새롭게 로딩하거나 그러지않는다.
WOW

리액트 쿼리.. 앞으로 자주 애용해야겠다.