I Built a React State Management Library that Combines the Best of Zustand and MobX

Context

Redux는 보일러플레이트 코드가 많고 MobX는 타입 추론이 어렵고 디버깅이 복잡한 상황에서 상태 관리 라이브러리 선택의 어려움이 있었다. Zustand는 단순하지만 클래스 기반 구조, 의존성 주입, 깊은 속성 감시 기능이 부족했다.

Technical Solution

• 클래스 기반 모델 정의: CounterModel처럼 일반 클래스로 상태와 메서드를 함께 정의해 Redux의 리듀서와 액션을 제거
• 의존성 주입(IoC) 구현: @inject 데코레이터와 Container 컴포넌트로 외부 의존성(예: API 설정)을 선언적으로 주입
• 깊은 속성 감시: watch 함수로 중첩된 객체 속성 변경을 경로와 함께 추적(예: order.items.0.price)
• 히스토리 관리: useModelHistory로 상태 변경 이력을 관리해 undo/redo 기능 제공
• 로딩 상태 자동 추적: @loader.load 데코레이터로 비동기 메서드 실행 상태를 자동으로 추적해 isLoading 함수 제공

Impact

100,000개 요소 배열에서 5회 배치 업데이트 벤치마크: easy-model 3.1ms (Zustand 대비 약 5배, MobX 대비 약 5.4배 빠름)

Key Takeaway

상태 관리 라이브러리 선택 시 성능과 개발자 경험의 트레이드오프를 명확히 인식해야 한다. 도메인 주도 설계와 의존성 주입이 필요한 복잡한 애플리케이션에서는 약간의 성능 오버헤드를 감수하고 클래스 기반 구조와 깊은 감시 기능을 얻을 가치가 있다.