2026-02-06

전역 상태

여러 컴포넌트·페이지에서

동시에 공유해야 하는 상태가 있을 때,

앱 전체에서 접근 가능한 위치에 둔다.

전역 상태를 언제 쓰는가

① 로그인 / 인증 상태

  • accessToken
  • user 정보
  • 로그인 여부

② 여러 페이지에서 공통으로 쓰는 상태

  • 다크모드
  • 언어 설정
  • 알림 on/off

③ UI 전역 제어

  • 모달 열림 여부
  • 토스트 메시지
  • 로딩 오버레이

④ 네트워크/앱 레벨 상태

  • 앱 초기 로딩 완료 여부
  • 권한 체크 결과
  • websocket 연결 상태

전역 상태 비추천

서버 상태는 캐싱·동기화·재요청이 중요하기 때문에

전역 상태보다 React Query가 적합

  • API 응답 데이터 (목록, 상세)
  • pagination, filter 결과
  • 서버에서 다시 받아올 수 있는 데이터

상태관리 종류

상태 종류 예시 도구
컴포넌트 로컬 input 값 useState
페이지 단위 검색 조건 useState / URL
전역 UI 모달 Zustand
인증 상태 로그인 Redux / Zustand
서버 상태 게시글 React Query

전역상태 라이브러리 종류

  • 1위: Redux Toolkit
    • 대기업 / 중견
    • 기존 레거시 많음
    • 협업, 규칙 중요할 때 
      useSelector((state) => state.auth.accessToken);
  • 2위: Zustand (최근 급증)
    • 스타트업 / SPA / 개인 프로젝트
    • 코드 간결
    • 러닝커브 낮음 
      useAuthStore((state) => state.accessToken);
  • 3위: Context + useState
    • 소규모
    • 라이브러리 추가 싫을 때
    • 금방 복잡해짐
  • 거의 안 씀
    • Recoil (감소 추세)
    • MobX (특정 팀 제외)

라이브러리 비교

구분 Redux Toolkit Zustand Context + useState Recoil MobX
핵심 컨셉 중앙 스토어 + reducer(불변 업데이트), 액션 기반 간단한 전역 store 훅, 함수로 상태/액션 정의 React 기본 기능으로 전역 공유 atom/selector 기반, 의존성 그래프 observable(반응형) 기반, 자동 추적
보일러플레이트 많음(하지만 RTK로 크게 감소) 매우 적음 적음(규모 커지면 급증) 중간 중간
러닝커브 중~상 하 하(하지만 패턴 설계가 필요) 중 중
성능(리렌더) selector로 최적화 가능(설계 따라 좋음) selector로 필요한 조각만 구독 → 대체로 좋음 Provider 값 바뀌면 하위 전부 리렌더 위험 구독 단위가 작아 비교적 좋음 관찰 대상만 반응 → 좋음
디버깅/추적 최강(Redux DevTools, 타임트래블) 간단(DevTools 미들웨어 가능) 도구 약함 전용 DevTools(환경 따라) 도구 있음(디버그는 스타일 차이)
팀 협업/규칙화 매우 강함(컨벤션/아키텍처 잡기 좋음) 자유도가 높아 팀 규칙 필요 작은 팀엔 OK, 큰 팀엔 어렵 구조는 깔끔, 팀 룰 필요 스타일 통일 필요(호불호)
타입스크립트 궁합 좋음(패턴 확립) 좋음(직관적) 보통(타입 설계 직접) 보통~좋음 보통~좋음
서버 상태(React Query)와 궁합 좋음(역할 분리 명확) 아주 좋음(가볍게 클라 상태만) 가능(구조 커지면 관리 어려움) 가능 가능
적합한 규모/상황 대규모/장기 운영, 팀 협업, 레거시 중소규모/빠른 개발, SPA, 개인/공모전 아주 소규모, 라이브러리 최소화 복잡한 파생 상태 많을 때(요즘은 감소 추세) 반응형 UI 많은 앱(선호 팀 한정)
요즘 실무 채택 분위기 여전히 강세(특히 조직 큰 곳) 상승세(스타트업/신규 프로젝트) 기본기/소규모용 감소 추세 특정 팀에서 꾸준히 사용
한 줄 요약 “규칙·추적·협업에 강한 표준” “가볍고 빠른 전역 상태” “작게는 충분, 크게는 힘듦” “atom 기반, 예전보다 덜 선택” “반응형 철학, 취향 타는 강자”

results matching ""

    No results matching ""