react-query

📋 react-query

react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리이다.

QueryClientProvider

react query를 사용하기 위해선 provider를 사용해야 한다.

보통 최상단 엘리먼트로 사용하며 client props를 전달해주어야 한다.

전달할 props값은 QueryClient의 인스턴스를 전달해주면 된다.

QueryClientProvier를 통해 앱 전체에서 QueryClent에 접근 가능하다.

• index.tsx

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

const queryClient = new QueryClient();

root.render(
  <QueryClientProvider client={queryClient}>
	  <App />
  </QueryClientProvider>
);

QueryClient

QueryClent는 캐시와 상호작용하는데 사용할 수 있다.

참고

QueryClient 공식문서

useQuery

QueryClientProvier를 통해 내려준 QueryClient에 접근하려면 useQuery 사용해야 한다.

데이터를 get하기 위한 api로, post, update는 useMutation을 사용한다.

두개의 인자를 갖는데 첫 번째 인자는 quearyKey(query 고유 식별자), 두 번째 인자는 queryFn(api fetch할 함수)를 갖는다.

import { useQuery } from "react-query";

const coinInfo = useQuery("coinList", fetchCoinList);

• 데이터 받아오는 중
  

• 데이터 받아온 상태
  

위 두 이미지를 보면 데이터를 받아올 때는 isLoading 값이 true, 데이터를 받아온 후에는 false로 바뀐 것을 확인할 수 있다.

isLoading이라는 값을 로딩창 구현으로 사용할 수 있는 것이다.

api에서 받아온 데이터는 data 값에 담기게 된다.

devtools

사용자의 캐시에 존재하는 쿼리를 조회할 수 있는 개발자 도구 이다.

사용법은 아래와 같다.

1. ReactQueryDevtools 모듈 import
2. devtools 옵션 설정

devtools는 되도록 최상단 엘리먼트 내부에 정의하도록 하자. 페이지 루트에 가까울수록 잘 작동하기 때문이다.

• App.tsx

import {ReactQueryDevtools} from "react-query/devtools";

const App = () => {
  <ReactQueryDevtools initialIsOen={true} />
}

옵션은 아래 링크를 참조하자.

react-query-devtools

devtools를 정의하면 실행중인 어플리케이션에서 보유중인 쿼리, 캐시에 저장된 데이터를 확인할 수 있다.

react query 사용시 한번 fetch 된 데이터는 캐시에 남아있기 때문에 로딩 기능을 사용한다면 최초 데이터 받아올 때만 로딩 기능이 작동한다.

캐시에 이미 데이터가 있기 때문에 해당 데이터를 다시 요청할 필요 없이 보여주기만 하면 되기 때문이다.

참고
react query 공식문서
react-query 참고블로그