Files
2nd/00_Raw/Zustand.md
T
2026-04-26 20:21:24 +09:00

3.9 KiB

Zustand

📌 Brief Summary

Zustand는 Jotai와 React Spring을 만든 팀에서 개발한 가볍고 빠르며 유연한 React 상태 관리 라이브러리입니다 [1, 2]. Context API가 가진 불필요한 리렌더링 문제와 Redux의 과도한 보일러플레이트 문제를 해결하기 위해 고안되었습니다 [2-4]. Zustand의 스토어는 React 컴포넌트 트리 외부에 존재하는 독립적인 자바스크립트 객체로 작동하며, Provider 래퍼(wrapper) 없이도 전역 상태를 효과적으로 관리할 수 있게 해줍니다 [5, 6].

📖 Core Content

  • 경량성과 단순성: Zustand는 패키지 크기가 약 2.2KB(압축 기준 약 1KB)로 매우 가벼우며, create() 함수 하나만으로 스토어를 생성할 수 있어 보일러플레이트가 거의 없습니다 [1, 5, 7, 8]. Redux와 달리 액션 타입, 리듀서 구성을 필요로 하지 않으며 상태와 업데이트 함수를 한 곳에서 직관적으로 정의합니다 [4-6].
  • 리렌더링 최적화 (Selector 패턴): Context API는 상태의 일부만 변경되어도 해당 컨텍스트를 구독하는 모든 컴포넌트가 리렌더링되는 성능적 한계가 있습니다 [3, 9, 10]. 반면 Zustand는 선택자(Selector) 패턴을 사용하여 컴포넌트가 자신이 필요로 하는 특정 상태 슬라이스(slice)에만 구독하도록 만듭니다 [9, 11]. 선택된 데이터가 변경될 때만 컴포넌트가 리렌더링되므로, 장바구니나 실시간 알림처럼 자주 업데이트되는 상태 관리에 탁월한 성능을 발휘합니다 [11, 12].
  • React 생명주기 외부에서의 작동: Zustand의 스토어는 단순한 자바스크립트 객체로서 React의 렌더링 주기 외부에 완전히 독립적으로 존재합니다 [5]. 이러한 아키텍처 덕분에 React 컴포넌트 외부의 유틸리티 함수나 API 헬퍼 파일 등에서도 직접 상태를 읽거나 업데이트할 수 있습니다 [8, 13].
  • 확장성 및 프로젝트 적합성: 약 50500개의 컴포넌트를 가진 중간 규모의 애플리케이션이나 515명 규모의 팀, 빠른 MVP 개발 환경에 가장 적합합니다 [14, 15]. 타입스크립트(TypeScript) 지원이 뛰어나며, 전역 상태가 많아지더라도 중첩된 Provider(Provider nesting)를 생성하지 않기 때문에 컴포넌트 트리를 깔끔하게 유지할 수 있습니다 [8, 13, 15].
  • 도입 시 주의점 (유연성의 양면성): 엄격한 패턴을 강제하는 Redux와 달리 Zustand는 너무 유연해서 개발자마다 비동기 작업 패턴을 다르게 작성하는 등 'Store Soup(스토어 혼돈)' 상태를 유발할 수 있습니다 [4, 14, 16]. 따라서 대규모 앱이거나 팀 규모가 커질 경우 선택자 사용 방식 및 미들웨어 패턴에 대한 명확한 규칙 수립이 요구되며, 통제가 어렵다면 Redux 도입이 더 나은 대안이 될 수 있습니다 [15, 17-19].

🔗 Knowledge Connections


Last updated: 2026-04-26