React Query vs Context API - 차이점 정리

프로젝트를 진행하다 보면 "React Query"와 "Context API"를 자주 사용하게 된다.

모두 데이터를 관리한다는 공통점이 있지만 데이터의 성격과 목적은 다르다.

오늘은 이 둘의 차이점을 비교해 보려 한다.

 

 

 

React Query vs Context API

	React Query	Context API
정의	서버 상태 관리 라이브러리	전역 상태 공유 기능
목적	서버와의 데이터 동기화, 캐싱, 비동기 요청 관리	컴포넌트 간 상태, 데이터 전달
기능	데이터 캐싱, 자동 리패치, 로딩/에러 상태 관리, 쿼리 무효화, 백그라운드 갱신	props drilling 방지, 전역 상태 유지
의존성	외부 라이브러리 설치 필요	추가 설치 불필요(React 내장 기능)

 

 

 

상태의 종류와 사용 범위

React Query는 서버 상태에 특화되어 있고, Context API는 클라이언트 상태 공유에 특화되어 있다.

• 클라이언트 상태(Client State)
  • UI, 모달 열림 여부, 폼 입력값 등 브라우저 안에서만 필요한 데이터
  • 서버와 동기화할 필요 없음
• 서버 상태(Server State)
  • API를 통해 가져오는 데이터
  • 서버와 주기적으로 동기화 필요

 

 

 

사용 예시

• React Query
  • 게시글 목록, 상품 데이터 등 서버와 동기화되는 리스트
  • 서버 요청 결과를 여러 컴포넌트에서 재사용, 자동 캐싱 필요
• Context API
  • 로그인한 유저 정보, 다크모드 설정, UI 토글 상태
  • 서버와 상관없는 전역 상태 관리

 

 

 

사용 방법

React Query

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

function PostList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["posts"],
    queryFn: () => axios.get("/api/posts").then(res => res.data),
  });

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

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

 

Context API

// ThemeContext.js
import { createContext, useState } from "react";

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// App.jsx
import { ThemeProvider } from "./ThemeContext";
import Header from "./Header";

export default function App() {
  return (
    <ThemeProvider>
      <Header />
    </ThemeProvider>
  );
}

 

 

 

요약

• React Query
  • 서버 상태 관리
  • 데이터 캐싱, 자동 리패치 지원
  • 네트워크 요청 최적화
• Context API
  • 전역 상태 공유
  • 서버 요청 기능 없음
  • 주로 UI 상태나 앱 설정값 전달에 사용

 

 

 

결론

• 둘은 경쟁이 아니라 서로 보완하는 관계이다.
• 서버에서 가져오는 데이터는 React Query로, 전역 UI 상태는 Context API로 관리하는 것이 제일 좋다.