🥕 React 내장
useState: 컴포넌트 레벨의 로컬 상태 관리
useReducer: 복잡한 상태 로직 관리 (Redux와 유사한 패턴으로 상태 업데이트)
useContext: 전역 상태 공유 (prop drilling 해결)
🥐 라이브러리
Redux: Redux Toolkit으로 사용하는 대규모 상태 관리 라이브러리
Zustand: 심플하고 가벼운 전역 상태 관리, Provider 없이 사용
Jotai: Context보다 빠르고 직관적인 상태 관리
Recoil: 상태 간 의존성과 Selector로 유연한 상태 관리
Valtio: 객체처럼 다루며 간단하게 사용하는 상태 관리
Mobx: 객체지향적 상태 관리, 반응성 높은 UI
🥨 서버 상태관리
TanStack Query: 서버 상태 관리 특화, API 데이터 관리 시 사용
SWR: 간단한 데이터 페칭과 캐싱 필요 시 사용
Apollo Client: 로컬 상태와 원격 상태 통합 관리 (GraphQL 전용)
🍞 폼 상태관리
React Hook Form: 성능 최적화 폼 라이브러리, 최소 리렌더링
Formik: 폼 상태와 유효성 검사 필요시 사용
🤖 상태관리의 "아키텍처 패턴" 이나 "구현방식" 분류 개념
1️⃣ Atomic Store
개념:
- 상태를 작은 단위(원자, atom)로 나누어 관리
- 각 원자는 독립적이고 필요할 때만 구독/업데이트
- Bottom-up 방식 (작은 것부터 조합해서 큰 것을 만듦)
라이브러리:
- Jotai:
atom()함수로 원자 생성 - Recoil:
atom()과selector()사용
장점:
- 필요한 부분만 리렌더링
- 컴포넌트별 필요한 상태만 구독
2️⃣ Flux Pattern
개념:
- 단방향 데이터 플로우 아키텍처
- Action → Dispatcher → Store → View → Action 순환
Action → Dispatcher → Store → View
↑ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ↓
←←←←←←←←←←←←←←←←←
라이브러리:
- Redux: Flux의 단순화된 구현
- Zustand: Flux 패턴을 간소화
장점:
- 예측 가능한 상태변화
- 디버깅 용이 및 액션을 통한 상태 변경만 허용
3️⃣ Proxy Store
개념:
- 객체에 대한 접근과 수정을 가로채서 반응성 구현
- 불변성 관리 없이 직접 뮤테이션 가능
라이브러리:
- Valtio: 가장 대표적인 Proxy 기반 라이브러리
- MobX: Proxy + 데코레이터 패턴 (관찰 가능한 상태)
장점:
- 직관적인 상태 변경 (일반 객체처럼 사용)
- 자동 최적화
예시 (Valtio):
const state = proxy({ count: 0 })
// 직접 변경 가능
state.count += 1🥹 그래서 언제 무엇을 선택하면 될까?
-
Atomic Store (Jotai, Recoil)
상태 간 복잡한 의존성 있을 때
세밀한 성능 최적화가 필요할 때
상태를 작은 단위로 나누어 관리하고 싶을 때 -
Flux Pattern (Redux, zustand)
예측 가능한 상태 변화가 중요할 때
팀 개발에서 일관성이 필요할 때
디버깅과 테스트가 중요할 때 -
Proxy Store (Valtio, Mobx)
빠른 프로토타이핑이 필요할 때
불변성 관리가 번거로울 때
직관적인 코드 작성을 원할 때
