React-query

리엑트 어플리케이션에서 api 요청을 보내고 이를 활용해야 할 경우가 존재한다.
아래에는 가상화폐의 가격을 체크하는 api를 활용하는 필자의 앱의 일부분인데, useEffect를 사용해 해당 페이지가 처음 로딩이 될때 두개의 api에 요청을 보내며, 이를 useState에 담아두는 코드이다.

useEffect(() => {
        (async () => {
            const infoData = await (
                await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
            ).json();
            const priceData = await (
                await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
            ).json();
            setInfo(infoData);
            setPriceInfo(priceData);
            setLoading(false);
        })();
    }, []);

하지만 호출해야 할 api들이 많아지면 위와 같은 코드는 번거로워질 수 있다.
이는 react-query를 사용하면 조금 간단화 시킬 수 있다.
React-query는 다음과 같이 설치할 수 있다.

npm -i react-query

React-query를 설치한 후 index.tsx 파일에 아래와 같이 queryClient를 추가해준다.

const queryClient = new QueryClient();

그 후 App을 QueryClientProvider로 감싸준다.

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

그리고 별도의 타입스크립트 파일을 생성해 api 요청을 하는 fetcher function을 작성해준다.

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

그 후 다음과 같이 사용해준다.

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

"allCoins"로 표기한 부분은 useQuery의 유니크한 키 값이고 전에 만들었던 fetchCoins 함수를 호출을 react-query가 호출을 하게된다.
그리고 api호출의 여부를 isLoading에 담아두고, 로딩이 끝난후 가져온 json데이터를 data에 담아두게 된다.
그리고 현재 타입스크립트를 사용하기 때문에 해당 json이 CoinInterface의 타입을 갖고 있다는 것을 지정해준다.

그리고 react-query를 사용하는 것이 코드를 간소화 하는 것 이외의 또 다른 장점은 해당 data를 캐쉬에 저장을 하여 다른 화면으로 이동을 한 후 다시 해당 화면으로 돌아와도 api를 다시 fetch 해오는 것이 아닌, 캐시에서 불러오기 때문에 해당 어플리케이션이 더 빨라진 것 같아 보이게 한다.