[React-query] 리액트 쿼리를 사용해보자!

 

React query는 왜 사용하나?!

리액트 쿼리를 사용하기 전에, 왜 이것이 그렇게 유용할까요? 리액트 쿼리의 장점은 다양한데 그 중 몇 가지를 읊어보자면

1. react-query 자체 캐싱

2. fetch 과정 간소화

3. 다양한 hooks

 

정도가 있을 것 같습니다. 그럼 리액트 쿼리의 사용 방법을 알아봅시다!

 

npm install react-query

우선 당연히 패키지를 다운로드 받아야합니다. 그리고 리액트 앱에 queryclientprovider을 제공해줘야 합니다.

 

Provide queryClient

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

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

평범한 provider 패턴입니다. 이렇게 우리는 리액트 모든 앱에 query client를 제공해주었습니다.

리액트 쿼리의 메소드는 다음과 같습니다.

 

const { isLoading, data } = useQuery<'types'>('유니크한 키', '패치 함수');

이 한 줄로 우리가 그 동안 행해왔던 fetch('어쩌구..').then(response ...) 를 대체할 수 있습니다! 우선 두 가지의 인수를 받습니다. 이 쿼리의 유니크한 키와 또 작성해야 할 패치 함수이죠. 패치 함수를 미리 작성하고 useQuery의 인수로써 전해줍니다.

 

그리고 isLoading이란 메소드를 제공합니다. useQuery의 모든 데이터가 준비가 되면 false를 리턴합니다. 직접 로딩함수를 작성할 필요가 없게 되는 것이죠!

 

그리고 패칭된 데이터는 data를 통해 받아 올 수 있습니다.

<h1>{data?.username}</h1>

다음과 같이 말이죠

 

Fetching function 

export const 함수이름 = () => {
  return fetch("url").then((response) =>
    response.json()
  );
};

다음과 같은 fetch function을 작성해주고 이 것을 useQuery의 인수로 전해줍니다.

 

이렇게 우리는 react-query를 사용할 수 있게 되죠. 그리고 이렇게 받아온 정보는 react-query의 자체 캐시 저장소에 저장됩니다. api server에 계속 요청을 보내지 않고 한 번 불러진 데이터는 자동으로 react-query의 캐시 정보를 재사용하게 됩니다.

 

길었던 데이터 패칭 함수가 이렇게 한 줄로 처리할 수 있다니! 게다가 자체적으로 강력한 캐싱 기능을 자동으로 제공하다니! 이 것을 안 쓸 이유가 있을까요?

 

또한 reactquerydevtool로 cache data를 시각적으로 확인할 수도 있습니다.

이렇게 리액트 쿼리를 사용하는 기초적인 방법을 알아보았습니다. api data를 fetch 해 보신적이 있으시다면, 이 것이 얼마나 좋은지 알 수 있을 것 같습니다 🥰

 

도움이 되셨으면 좋겠습니다. 감사합니다.