useQuery를 이용해 비동기데이터 관리하기

white noise·2025년 11월 10일

FE usequery

스터디를 하면서 useQuery를 이용해 상태관리 하는 법을 배웠다. 하지만 얼레벌레 과제를 하다 보니 useQuery를 제대로 모르는 것 같아서 한번 알아보려고 한다.

Query란?

일단 쿼리(Query)란 무엇일까?

쿼리.. 많이 들어봤는데 뭔지 잘 모르겠어서 찾아봤다.
query란 '질문하다'라는 뜻을 가지고 있으며, 프로그래밍에서는 데이터베이스에 원하는 정보를 요청하고 추출하기 위한 질문이나 명령이라고 한다.

useQuery에 대해 알아보자

그럼 제목인 useQuery는 뭔데 비동기 데이터를 관리할 수 있는걸까?

일단 useState와 useEffect를 사용해서 비동기데이터를 관리할 때를 생각해보자.

useState를 이용해서 비동기 데이터도 받아줘야하고.. useEffect로 비동기 함수를 실행하고 데이터를 의존성 배열에도 넣어줘야 하고...

const [data, setData] = useState<ResponseMyInfoDto>([]);

  useEffect(() => {
    const getData = async () => {
      const response = await getMyInfo();
      console.log(response);

      setData(response);
    };

    getData();
  }, []);

대충 이런 형식이 나올 것이다.
근데 사실 이게 다가 아니라 Loading일 때, Error일 때 등을 위해 useState를 또 선언해줘야한다.

관리가 정말 귀찮다..

이럴때 사용하는게 useQuery이다.

useQuery 사용법

구 React Query, 현 TanStack Query는 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다.

일단 설치하고 시작하자

npm i @tanstack/react-query

pnpm add @tanstack/react-query

yarn add @tanstack/react-query

그리고선 QueryClientProvider를 최상단에 감싸줘야 한다.

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

const queryClient = new QueryClient();
export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WelcomeData />
    </QueryClientProvider>
  );
}

이런식으로 감싸주면 된다.

{ data, isPending, isError } = useQuery({
    queryKey: [QUERY_KEY.lps, lpId],
    queryFn: () =>
      getLpDetail({
        lpId,
      }),
});

queryKey [QUERY_KEY.lps, lpId]를 Key로 사용하여 이 Unique Ket로 서버 상태를 로컬에 캐시하고 관리한다.
queryFn으로 비동기 함수를 등록한다. 이 함수를 통해 데이터를 받아올 수 있다.
{ data, isPending, isError } 과 같은 상태를 받아올 수 있어서 useState를 이용한 상태관리를 직접 안해줘도 된다!

많이 사용하는 쿼리 옵션들

enabled(boolean): 쿼리가 자동으로 실행되지 않게 설정하는 옵션
retry(boolean | number | (failureCount: number, error: TError) => boolean): 실패한 쿼리를 재시도하는 옵션
staleTime(number | 'static' | ((query: Query) => number | 'static')): 데이터가 fresh 상태로 유지되는 시간
gcTime(number | Infinity): 사용되지 않는 데이터의 보관 기간.

나머지 옵션들은 여기를 들어가보자..

useMutation

useMutation Hook으로 수행되는 Mutation 요청은 POST, PUT, DELETE와 같이 서버에 Side Effect를 발생시켜 서버의 상태를 변경시킬 때 사용한다.

const { mutate, isPending, isError, isSuccess } = useMutation({
    // data -> API 성공 응답데이터
    mutationFn: postLike,
    onSuccess: (data) => {
      queryClient.invalidateQueries({
        queryKey: [QUERY_KEY.lps, data.data.lpId],
        exact: true,
      });
    },
  });

useMutate의 흐름
mutate({ lpId: Number(lpid) }) 실행 -> postLike 성공 -> onSuccess 실행 -> queryKey: [QUERY_KEY.lps, data.data.lpId] 해당 queryKey에 등록된 queryFn 함수를 통해 서버로 데이터를 재요청 -> Tanstack Query가 자동으로 Re-fetch

useMutation의 주요 옵션들