리바이 개발 블로그

react-query는 상당히 많이 사용되는 상태관리 라이브러리 중 하나이다.

**TanStack Query(FKA React Query)**는 종종 웹 애플리케이션용 누락된 데이터 가져오기 라이브러리로 설명되지만 좀 더 기술적인 용어로 말하면 웹 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만듭니다.

> 「kakao 2021 - 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유」 세줄요약

React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있습니다.

즉, API요청과 관련된 값을 불러오고, 캐싱하고, 시간이 지난 데이터들을 업데이트하는 것을 담당하는 라이브러리

초기세팅

index.tsx or main.tsx

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
 
export default function ReactQuery() {
  const fetchPost = () => {
    return axios.get("http://localhost:3004/posts");
  };
 
  const { data, isLoading, isError, error, refetch } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPost,
    retry: 1,
 
    select: (data) => {
      return data.data;
    },
    // staleTime: 10000, // 1분간 api호출 금지
    // gcTime: 10000, // 10초간 캐시가 유지      staleTime < gcTime 이어야 한다.
    // refetchInterval: 3000,   // 3초 마다 api 호출함
    // refetchOnMount: false, // 처음에는 fetch되지만 다시 page를 들어갈땐 fetch를 더 이상 안함 , 반대로 true하면 매번 호출 (기본값)
    // refetchOnWindowFocus: true, // 실시간으로 항상 refetch 됌  -> 화면 볼때마다
  });
 
  console.log("데이터 테스트: ", data, isLoading);
  console.log("에러 테스트: ", isError, error);
 
  if (isLoading) {
    return <h1>Loading...</h1>;
  }
 
  if (isError) {
    return <h1>{error.message}</h1>;
  }
 
  return (
    <main>
      <button
        onClick={() => refetch()}
        className="bg-red-500 p-1 text-white rounded-lg"
      >
        post리스트 다시 들고오기!
      </button>
      {data.map((item: any, idx: number) => (
        <div key={idx}>{item.title}</div>
      ))}
    </main>
  );
}

useQuery
useQuery는 데이터 패칭, 캐싱, 재시도 등의 로직을 간단하게 처리하는 React Query의 훅입니다. 이 훅을 사용하여 서버에서 데이터를 가져오고, 로딩 상태, 에러 상태 등을 쉽게 관리할 수 있습니다.

파라미터 설명

queryKey: ["posts"]:
queryKey는 이 쿼리의 고유한 식별자 역할을 합니다. 서버에서 데이터를 패칭할 때, React Query는 이 키를 기준으로 캐싱을 처리하고, 데이터를 다시 가져와야 하는지 판단합니다. 여기서 ["posts"]는 "posts"라는 이름으로 데이터를 구분합니다.
queryFn: fetchPost:
queryFn은 데이터를 가져오는 함수입니다. fetchPost 함수는 서버에서 데이터를 가져오는 비동기 함수이며, 이 예시에서는 fetchPost를 통해 "posts" 데이터를 가져옵니다. fetchPost는 Promise를 반환하는 함수여야 합니다.
retry: 1:
이 설정은 요청이 실패했을 때 재시도 횟수를 지정합니다. 여기서 1은 요청이 실패했을 때 1회 재시도한다는 의미입니다. 기본값은 3회입니다.
select: (data) => data.data:
select는 가져온 데이터를 변환하거나 가공할 수 있는 함수입니다. select 함수는 쿼리가 성공적으로 완료된 후 실행됩니다. 여기서는 data 객체에서 data.data만을 선택해서 반환합니다. 서버 응답이 data: [...] 형태로 오는 경우에 특정 속성만 선택할 때 사용합니다.
staleTime : 데이터를 캐시한 후 얼마 동안 데이터가 신선하다고 간주될지를 설정하는 옵션입니다. 이를 통해 데이터 요청을 최적화하고 성능을 향상시키며, 사용자 경험을 개선할 수 있습니다. 1000 : 1초
staleTime: 10000 로 하면 , 데이터가 캐시된 후 10초 동안은 React Query가 자동으로 새 데이터를 요청하지 않고, 캐시된 데이터를 사용합니다.
즉, 정리를 하면

staleTime의 역할

데이터 신선도 유지:
staleTime은 데이터를 캐시한 후 얼마 동안 그 데이터를 **"fresh"**하다고 간주할지를 정의합니다. 이 시간 동안은 React Query가 데이터를 자동으로 다시 요청하지 않습니다.
재요청 최적화:
staleTime이 지나면 데이터는 **"stale"**으로 간주되며, React Query는 다음에 해당 데이터가 필요할 때 서버로부터 새로운 데이터를 요청합니다.
즉 이것들을 이용하여 쓸데없는 응답 요청을 방지할 수 있다!!

이 말고도 다양한 옵션이 존재한다

staleTime: 10000, // 1분간 api호출 금지
gcTime: 10000, // 10초간 캐시가 유지 staleTime < gcTime 이어야 한다.
refetchInterval: 3000, // 3초 마다 api 호출함
refetchOnMount: false, // 처음에는 fetch되지만 다시 page를 들어갈땐 fetch를 더 이상 안함 , 반대로 true하면 매번 호출 (기본값)
refetchOnWindowFocus: true, // 실시간으로 항상 refetch 됌 -> 화면 볼때마다

또한 useQuery함수에서 "refetch"를 들고와서 button 태그에서 onClick핸들러에 fetch함수를 넣어서 매번 클릭할 때마다 fetch 즉 api호출을 할 수 있다.

useQueries

import { useQueries } from "@tanstack/react-query";
import axios from "axios";
 
export default function ReactQueriesPage() {
  const ids = [1, 2, 3, 4];
 
  const fetchPostDetail = (id: number) => {
    return axios.get(`http://localhost:3004/posts/${id}`);
  };
 
  const result = useQueries({
    queries: ids.map((id) => {
      return {
        queryKey: ["posts", id],
        queryFn: () => fetchPostDetail(id),
      };
    }),
 
    combine: (results) => {
      return {
        data: results.map((result) => result.data?.data),
      };
    },
  });
 
  console.log("결과", result);
 
  return (
    <main>
      <div>{}</div>
    </main>
  );
}

useQueries

useQueries는 React Query의 훅으로, 여러 쿼리를 동시에 처리하고 관리하는 데 사용됩니다. 각 쿼리는 useQuery와 비슷하지만, 여러 쿼리의 결과를 배열 형태로 반환합니다.