[React] react-query 의 useQuery 알아보기

리액트로 개발할 때 서버에서 데이터를 fetching하고 loading 처리를 하기 위해서 state와 fetch혹은 axios라이브러리를 이용한다. 이 일련의 과정을 단 코드 하나로 간편화 할 수 있으며 caching기능 까지 있는 react-query라는 라이브러리가 있다.

 

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


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

아직은 왜 provider형식으로 최상의 부모에게 위와 같이 해주는 진 모르겠다. 내 블로그는 아직 정보전달성 보다는 공부 기록 일기에 가까우니 이는 차후에 내 실력이 남에게 좋은 정보를 전달할 수준이 된다면 포스팅 할 것이다.

 

  const { isLoading, data } = useQuery<ICoin[]>("allCoins", fetchCoins);

 

useQuery를 사용하면 정말 좋은 장점이 하나 있다. 라우팅으로 컴포넌트가 재 렌더링이 되어도 데이터를 다시 fetching하지 않는다.

 

caching이 되는게 최대 장점이라고 생각한다.