React Query, Redux Toolkit Query

리액트 개발을 하다 보면 서버에서 데이터를 가져오고, 이를 캐싱하거나 리패칭하고, 로딩 및 에러 상태를 처리해야 할 일이 많습니다. 이럴 때 사용되는 대표적인 상태 관리 라이브러리가 바로 React Query와 Redux Toolkit Query(RTK Query)입니다.

 

---

React Query

React Query는 서버 상태(server state)를 React 컴포넌트 안에서 쉽게 관리할 수 있도록 도와주는 라이브러리입니다.

• 서버에서 데이터를 가져오고(fetch),
• 캐싱하고(cache),
• 자동으로 리패칭(refetch),
• 로딩 및 에러 상태를 처리

하는 기능을 명확하고 간결한 API로 제공합니다.

 

React에 최적화된 서버 상태 관리 라이브러리이며, Redux와는 별개로 동작합니다.

 

---

 

RTK Query

RTK Query는 Redux Toolkit에 내장된 API 비동기 통신 전용 툴입니다.

Redux store를 기반으로 동작하며, Redux의 일관된 액션 흐름 안에서 서버 상태를 다루고자 할 때 유용합니다.

 

Redux를 이미 사용하는 프로젝트라면 RTK Query를 통해 서버 상태까지 통합 관리할 수 있습니다.

 

---

기능 비교

항목	React Query	RTK Query
의존성	React만 필요	Redux Toolkit 필요
전역 상태 연동	기본적으로 없음	Redux store와 자동 연동
Devtools	React Query Devtools	Redux Devtools 사용
코드 구조	컴포넌트 중심	API Slice 중심
캐시 유지	자동 stale/GC	설정에 따른 cacheTime 유지
Mutation	useMutation	createApi 내부에 정의
SSR 지원	Next.js 등에서 풍부하게 사용	가능은 하지만 추가 설정 필요

 

 

예제 : 사용자 목록 가져오기

React Query 예시

import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  return res.json();
};

export const UserList = () => {
  const { data, isLoading, error } = useQuery(['users'], fetchUsers);

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생</p>;

  return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

 

 

RTK Query 예시

// services/userApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUsers: builder.query<User[], void>({
      query: () => 'users',
    }),
  }),
});

export const { useGetUsersQuery } = userApi;

// 컴포넌트
export const UserList = () => {
  const { data, isLoading, error } = useGetUsersQuery();

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생</p>;

  return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

 

 

---

 

어떤 상황에 어떤 걸 써야 할까?

✔️ React Query를 선택할 때

• Redux를 굳이 사용하지 않는 프로젝트
• 페이지 단위의 독립적인 서버 상태 관리가 많은 경우
• 빠르게 API 붙이고, 제거하거나 기능을 단위 테스트하고 싶은 경우
• Next.js 기반의 서버 사이드 렌더링 환경

✔️ RTK Query를 선택할 때

• Redux를 이미 사용하는 프로젝트 (상태 통합)
• 정형화된 API 호출 패턴이 많은 경우
• 전역 store에서 서버 상태를 캐싱/조작하고 싶은 경우
• 캐시 무효화(invalidate) 같은 고급 기능을 Redux 흐름 안에서 관리하고 싶을 때

 

---

 

정리

• React Query는 빠르고 유연한 도입에 적합하며, 독립적으로 서버 상태를 잘 관리할 수 있습니다.
• RTK Query는 Redux 생태계 내에서 일관된 상태 관리를 원하는 팀에 적합합니다.