react-zustand-toolkit이 Zustand에 스코프된 상태 관리 패턴을 추가해 반복적인 Context + Provider 보일러플레이트 코드 제거

Context

Zustand는 단순한 전역 상태 관리 라이브러리로 설계되어 있다. 애플리케이션이 성장하면서 여러 개의 독립적인 위젯이나 탭처럼 동일한 스토어의 격리된 인스턴스가 필요한 상황이 발생한다. 이 문제를 해결하기 위해 React Context를 수동으로 조합해야 하는데, React Context 생성, 팩토리 함수 작성, Provider 컴포넌트 구축, 강타입 셀렉터 훅 재작성, useShallow를 통한 불필요한 리렌더링 방지 등 반복적인 작업이 증가한다.

Technical Solution

• createShallowStore: 생성된 훅이 기본으로 zustand/shallow를 적용해 객체·배열 선택 시 얕은 비교 수행
• 스코프된 Context 제공자: 팩토리 함수가 격리된 스토어 인스턴스마다 자동으로 Context와 Provider를 생성
• Resolved 훅: 스코프된 스토어 또는 전역 스토어에서 자동으로 상태를 읽는 훅 제공으로 호출처에서 출처 구분 불필요
• Strong 타입 유지: 생성된 useStore, useStorePlain, useStoreApi 훅에 TypeScript 제네릭 적용
• React 19 유틸리티: use() 훅 등 최신 React API와의 통합 레이어 제공

Key Takeaway

상태 소유권 모델을 명확히 정의하는 것이 핵심이다. 전역 스토어만 필요하면 순수 Zustand로 충분하고, 서브트리마다 격리된 인스턴스가 필요하거나 다중 탭에서 상태를 오버라이드해야 하는 경우에 이 패턴을 선택적으로 적용하면 된다.