@tanstack/react-query 사용해보기

sham·2024년 10월 5일

SkyScope 개발일지

목록 보기

4/12

다음 토이프로젝트의 개발 기록이다.

react-query 아니죠, @tanstack/react-query 맞습니다.

개요

@tanstack/react-query는 비동기 데이터 페칭, 캐싱, 동기화 등을 간단하게 관리할 수 있는 라이브러리다. 기존의 Redux와 같은 상태 관리 도구로도 비동기 작업을 처리할 수 있지만, React Query는 비동기 데이터 처리에 특화되어 있어 서버에서 데이터를 가져오는 작업을 매우 간결하고 효율적으로 관리할 수 있다.

주요 기능은 다음과 같다.

캐싱: 데이터가 동일한 요청에서 재사용될 수 있도록 관리
자동 갱신: 데이터가 백그라운드에서 새로고침되도록 설정 가능
데이터 무효화: 특정 상황에서 데이터 무효화하여 최신 데이터를 다시 가져오도록 설정
로딩 및 오류 상태 관리: 로딩, 오류, 성공 상태를 쉽게 파악할 수 있는 기능 제공

설치

npm install @tanstack/react-query @tanstack/react-query-devtools

쿼리 등록

React Query의 핵심 기능은 데이터를 가져오는 쿼리를 등록하는 것이다. useQuery 훅을 통해 API 호출과 데이터를 가져오는 로직을 간결하게 작성할 수 있다.

Quries/useShortDataQuery.ts

import { useQuery } from "@tanstack/react-query";
import { getWeatherShort } from "@src/API";
import { IParseObj } from "@src/API/getWeatherShort";

const useShortDataQuery = (today: Date) => {
  const { data, isLoading, error } = useQuery<IParseObj | undefined>({
    queryKey: ["short"],
    queryFn: () => getWeatherShort(today),
  });
  const dataArr = [];
  const dateArr = [];

  // data가 있으면 파싱해서 넘겨주기
  if (data) {
    for (let i in data) {
      dataArr.push(data[i]);
      dateArr.push(i);
    }
  }
  return { data: dataArr, date: dateArr, isLoading, error };
};

export default useShortDataQuery;

이 코드는 getWeatherShort API 호출을 통해 날씨 데이터를 가져오고, 데이터를 배열 형태로 가공하여 반환한다. useQuery 훅을 사용하여 데이터 페칭과 동시에 로딩 상태(isLoading), 에러 상태(error)도 관리한다.

queryKey

queryKey는 캐시와 데이터를 식별하는 고유 키다. 동일한 쿼리 키를 사용하면 React Query는 자동으로 캐시를 활용하거나, 새롭게 데이터를 페칭할지 판단한다.

queryFn

queryFn은 실제 데이터를 가져오는 함수로, API 요청을 수행하는 부분이다. 이 함수는 useQuery 내부에서 호출된다.

React-query 적용

React Query를 프로젝트에 적용하기 위해 QueryClientProvider로 쿼리 클라이언트를 설정하고, QueryClient로 기본 옵션을 정의한다.

App.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      refetchOnWindowFocus: false,
    },
  },
});

import { MainPage } from "@src/Page";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MainPage />
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default App;

QueryClient

staleTime: 데이터가 오래되기 전까지 캐시된 데이터를 그대로 사용하며, 해당 시간 이후에만 다시 데이터를 가져온다.
refetchOnWindowFocus: 브라우저 창이 다시 활성화될 때 데이터를 다시 가져올지 여부를 설정한다.

쿼리 사용

쿼리를 설정한 후 컴포넌트에서 useShortDataQuery 훅을 사용해 데이터를 가져와 화면에 표시한다.

React Query에서 useQuery 훅을 사용할 때, 비동기 함수(예: API 호출)를 queryFn으로 넘겨주면 React Query가 알아서 해당 비동기 작업을 처리하고, 그 결과를 data, isLoading, error 등의 상태로 제공한다. 즉, async, await 등의 처리가 없어도 된다는 사실!

이 방식 덕분에, 데이터를 요청하고 처리하는 비동기 로직을 간결하게 관리할 수 있다. 직접 await나 async로 처리하는 방식보다 React Query가 제공하는 훅으로 비동기 상태 관리가 훨씬 간편하다.

Page\MainPage\RecentDays\RecentDays.tsx

import { useState, useEffect } from "react";

import RecentDay from "./RecentDay";
import { useShortDataQuery } from "@src/Queries";

import { styled } from "styled-components";

const RecentDays = () => {
  const today = new Date();

  const { data, date, isLoading, error } = useShortDataQuery(today);

  return (
    <RecentDayContainer>
      {data &&
        data.map((arrItem, index) => {
          return (
            <RecentDay
              recentData={arrItem}
              keyDate={date[index]}
              isLoading={isLoading}
            />
          );
        })}
    </RecentDayContainer>
  );
};

export default RecentDays;

const RecentDayContainer = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 1200px;
  > div {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
  }
`;