React에서 Zustand vs Context API 상태관리 비교

좋은 질문이에요!
React에서 Zustand vs Context API 중 무엇을 선택할지는
당신의 프로젝트 규모, 데이터 흐름 복잡도, 성능 민감도에 따라 달라집니다.
아래에 정확한 비교와 추천 기준을 정리해드릴게요.

---

✅ 핵심 차이 요약

항목 Context API Zustand

목적	간단한 전역 데이터 공유	상태 관리 전용 라이브러리
리렌더링 제어	❌ 힘듦 (context 값이 바뀌면 하위 모두 리렌더됨)	✅ 매우 잘됨 (선택적 구독)
사용 방식	React 내장 기능	별도 라이브러리 설치 필요 (npm i zustand)
복잡한 상태	❌ 불편함 (useReducer 등 필요)	✅ 쉽고 가볍게 가능
미들웨어/디버깅	제한적	Logger, persist, devtools 등 확장성 있음
성능	작을 땐 충분함	커지면 Zustand가 유리

---

✅ 언제 Context API가 좋을까?

작고 단순한 상태를 전역으로 공유할 때

• 예시:
  • 로그인 여부, 사용자 정보
  • 테마 다크모드 설정
  • 다국어 설정 (i18n)

🎯 ✅ “변화가 자주 없고 구조가 단순한 값들” → Context로 충분

---

✅ 언제 Zustand가 좋을까?

**다양한 상태(배열, 객체, 비동기 데이터 등)**를 다양한 컴포넌트에서 효율적으로 관리할 때

• 예시:
  • 다단계 컴포넌트에서 페이지 상태, 필터, 모달 상태 공유
  • 게시판/지도/차트 등 복잡한 UI 상태
  • 비동기 데이터 + 캐싱 (e.g. API 상태)

🎯 ✅ “자주 바뀌고, 부분적으로만 렌더링되길 원한다면 Zustand 추천”

---