[React]React-query

react-query를 설치해보자

yarn add react-query

 

리액트 쿼리 설치 이후 사용법은?

/ index.tsx

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

const queryClient = new QueryClient();

를 이용하여 import 및 queryClient 선언

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);

QueryClientProvider로 감싸주면 설치는 끝이났다!

ReactQuery를 쓰면 좋은점?
loading같은 것을 직접 코딩하지 않아도 된다!

 

fetcher 함수 만들기!

fetch를 이용하여 함수를 만들자!

/api.ts
function fetchCoins() {
  return fetch('https://api.coinpaprika.com/v1/coins').then((response) => response.json());
}
export default fetchCoins;

해당 함수를 coins 컴포넌트에서 useQuery 훅을 이용하여 사용해보자

import { useQuery } from 'react-query';

const { isLoading, data } = useQuery('allCoins', fetchCoins);

useQuery는 두 개의 인자를 받는다!

첫 번 째 인자는? useQuery의 키 값

두 번 째 인자는? fetcher함수

 

useQuery hook은 fetcher함수를 부르고, fetcher함수가 loading중이라면 react query는 그것을 알려준다!
useQuery는 fetcher 함수를 부르고 fetcher함수가 끝나면 json파일을 data에 집어넣는다!

 

 

장점은 뭘까?
React Query는 우리가 원하는 data가 이미 캐시에 있다는 것을 알고 있기 때문에
스크린을 바꿨다가 다시 돌아와도, Loading이 뜨지않는다!
즉, API에 접근하지 않는다.

Devtools

render할 수 있는 컴포넌트

React query에 있는 devtools를 Import 하면 캐시에 있는 query를 볼 수 있다.

사진과 같이 react query에 있는 내용을 확인할 수 있다.

클릭을 함으로써, 캐시가 쌓이고, 이후 로딩창이 보이지 않는다!

데이터를 캐시에서 가지고 오기 때문이다 ~~