2025년 기준 React 상태관리 가이드

2025년 실무 기준으로 React 상태관리는 Reminder가 아닌 분리 전략이 핵심입니다.

✅ 한 줄 요약

• 서버 상태 → TanStack Query
• 전역 상태 → Zustand
• 로컬(UI) 상태 → useState / useReducer
• 설정/고정 값 → Context API

1️⃣ 서버 상태 관리 — TanStack Query

왜 필요한가?

• API 데이터 캐싱
• 자동 리패칭
• 로딩 / 에러 상태 관리
• optimistic update

npm install @tanstack/react-query

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

const { data, isLoading, error } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
});

👉 서버 데이터는 Redux로 관리하지 않습니다.

2️⃣ 로컬 상태 — useState / useReducer

useState

const [open, setOpen] = useState(false);

useReducer

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

👉 컴포넌트 내부 상태는 React 기본 훅이 가장 좋습니다.

3️⃣ 전역 상태 — Zustand (2025 표준)

npm install zustand

import { create } from "zustand";

export const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

const user = useUserStore((state) => state.user);

Zustand 장점

• Boilerplate 없음
• Redux보다 단순
• Context보다 성능 우수

4️⃣ Context API는 언제 쓰나?

<ThemeContext.Provider value="dark">

✔ 테마
✔ 언어
✔ 인증 여부

❌ 잦은 상태 변경
❌ 대규모 전역 상태

5️⃣ Redux Toolkit은 언제 쓰나?

사용하는 경우

• 대규모 엔터프라이즈 프로젝트
• 기존 Redux 코드 유지보수

❌ 신규 프로젝트에는 비추천

6️⃣ 2025 기준 비추천 라이브러리

📦 추천 조합 (Best Practice)

서버 상태   → TanStack Query
전역 상태   → Zustand
로컬 상태   → useState / useReducer
설정 값     → Context

🎯 결론

2025년 React 상태관리는
하나로 통합하지 않고, 목적에 따라 분리하는 것이 정답입니다.