React Query는 데이터를 캐싱한다!

리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만든다.

API를 가져올 때 사용하는 코드를 몇 줄만으로 줄일 수 있다. 

우선 npm i react-query 로 설치해준 다음에

다음과 같이 기본 세팅한다.

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

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

useQuery를 사용하면 isLoading, data 값을 더 쉽게 가져올 수 있다.

첫번째 인자에는 유니크한 값, 두번째 인자에는 promise를 반환하는 함수(fetcher)를 넣어주어야 한다.

const [isLoading, data] = useQuery("allData", fetcher);

이 방식으로 데이터를 가져오면 데이터를 캐싱하기 때문에 한번만 가져온 다음에는 로딩없이 가져온다.

데이터를 가져오는데 지연이 일어나지 않는 것이다.