🧠 39. React Native 상태관리 완전 정리 — Context vs Zustand vs Redux 비교와 선택 기준

---

React Native 앱을 만들다 보면
화면 전환이 많고, 컴포넌트 간 상태 공유도 잦고, 비동기 통신도 흔한 구조를 갖게 된다.

그럴수록 상태 관리는 코드의 뼈대처럼 중요해진다.

이번 글에서는 모바일 앱에서 실제로 자주 쓰이는
Context, Zustand, Redux Toolkit을 비교하고,
각 방식의 특징, 장단점, 실전 사용 예제를 정리해봤다.

---

✅ 1. Context API

React 기본 제공, 가볍고 간단한 전역 상태 공유 방식

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

✅ 간단한 토글, 다크모드, 사용자 정보 등에 적합
❌ 깊은 트리에서 성능 이슈 가능
❌ 상태가 많아지면 구조 복잡

---

✅ 2. Zustand (🐻)

간결하고 사용하기 쉬운 상태관리 라이브러리 (웹에서도 인기)

npm install zustand

import { create } from 'zustand';

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

• 어떤 컴포넌트에서든 useUserStore()로 상태 접근 가능
• subscribe, persist(로컬 저장), middleware 등도 쉽게 확장 가능
• 훅 기반이라 React에 아주 잘 녹아듦

✅ 상태 분리, 구조화 쉬움
✅ persist로 로컬 저장 가능 (토큰, 테마 등에 유용)
❌ 아직 공식 devtools는 약함

---

✅ 3. Redux Toolkit

상태관리의 정석, 대규모 앱이나 복잡한 상태 처리에 적합

npm install @reduxjs/toolkit react-redux

• 중앙 집중형 스토어
• 액션 → 리듀서 → 디스패치 → 구독 구조
• 복잡하지만 구조 명확하고 타입 안정성 높음

✅ 복잡한 비즈니스 로직
✅ 서버 상태와의 통합 (RTK Query)
❌ 설정 복잡, 코드 많음

---

📊 세 가지 비교

항목	Context	Zustand	Redux Toolkit
난이도	쉬움	중간	높음
사용 규모	소규모	중~대규모	대규모
상태 구조화	제한적	매우 유연	강력함
성능 최적화	수동 필요	자동 분리 가능	고성능 (with slice)
비동기 처리	직접 구현	자유롭게	Thunk, RTK Query
로컬저장 연동	수동	persist로 쉬움	수동 or middleware

---

🧠 어떤 상황에 어떤 걸 선택할까?

상황	추천 도구
다크모드, 언어 전역 설정	Context
로그인 상태, 토큰 저장	Zustand (persist)
API 상태 캐싱, 뷰 간 공유	Zustand or Redux
대규모 협업, 복잡한 로직	Redux Toolkit

---

📝 내가 느낀 점

처음에는 Context만으로 다 가능하다고 생각했는데,
로그인 상태를 여러 컴포넌트에서 쓰다 보니
불필요한 렌더링, 트리 깊이, prop drilling 회피 등으로 너무 복잡해졌다.

지금은 대부분 Zustand로 상태를 나누고,
API 캐싱이 필요한 부분만 React Query,
진짜 복잡한 앱은 Redux로 전환하는 구조를 쓰고 있다.

---

🧠 “앱의 복잡도가 올라갈수록 상태관리는 구조 설계가 된다.”

---