Zustand

A small, fast and scalable bearbones state-management solution using simplified flux principles.

— Zustand 공식 깃허브 메인 페이지 및 귀여운 곰돌이 로고 설명

Redux를 쓸 때는 수십 개의 파일과 씨름해야 했는데, Zustand를 쓰는 순간 코드 몇 줄로 모든 전역 상태가 가볍고 완벽하게 동기화되는 희열을 느끼게 된다. ~~이렇게 간단하고 명확하게 구현할 수 있는 것을 우리는 왜 지난 수년간 그 무거운 Redux Thunk와 Saga의 고문 속에서 야근을 자처했는가.(...)~~

1. 개요

Zustand(독일어로 '상태'를 의미)는 React 생태계에서 최근 가장 선풍적인 인기를 끌며 대세로 자리매김한 초경량 전역 상태 관리 라이브러리이다. 3D 그래픽 라이브러리인 Three.js의 React 래퍼를 만드는 Poimandres 팀에서 개발했다. 기존의 절대 강자였던 Redux가 지나친 보일러플레이트와 복잡성으로 스스로 붕괴하고, React의 Context API는 컴포넌트 전체를 불필요하게 무한 렌더링시키는 성능 한계를 보이자, 이를 해결하기 위해 가장 가볍고, 가장 빠르고, 가장 단순한 곰돌이 마스코트를 달고 혜성처럼 등장했다.

2. 독일어로 시작되는 미니멀리즘과 렌더링 최적화

Zustand의 작동 원리는 놀라울 정도로 미니멀하다. React의 <Provider>로 컴포넌트 트리 전체를 감싸서 데이터를 강제 주입할 필요가 없다. 그저 create 함수를 호출하여 상태 객체와 이를 변경하는 액션 함수들을 정의하는 클로저 상점을 개설하면 끝이다. 전역 스토어가 React 바깥의 일반 자바스크립트 객체 영역에 독립적으로 존재하기 때문이다. 컴포넌트에서는 useStore(state => state.bears) 처럼 오직 자신이 사용할 상태 필드만 콕 집어서 셀렉터(Selector) 형태로 구독하며, 이 지정한 필드가 바뀔 때만 기막히게 똑똑하게 부분 렌더링(Re-rendering)이 발생한다. ~~이 극단적인 심플함에 길들여진 개발자들은 다시는 Redux 코드를 작성할 수 없는 일종의 기능적 지체 상태에 빠지게 된다.~~¹

3. Vanilla JS 지원과 완벽한 TypeScript 친화성

Zustand는 React 전용 도구처럼 보이지만, 실제로는 내부에 React 종속성이 전혀 없는 순수 자바스크립트 전역 펍섭(Pub/Sub) 라이브러리(zustand/vanilla)를 품고 있다. 따라서 React 없이 생 바닐라 자바스크립트나 Node.js 환경, 심지어 타 프레임워크에서도 전역 상태 관리기로 유연하게 사용할 수 있다. 또한 TypeScript 환경에서 타입 추론(Type Inference)이 물 흐르듯 완벽하게 매핑되어, 별도의 번거로운 제네릭 수식어나 인터페이스 매핑 노가다 없이도 완벽한 자동완성과 정적 분석의 혜택을 온전히 누릴 수 있어 실무 만족도가 극상에 달한다.(...)

4. 관련 밈 및 드립

4.1. Zustand의 독일어 학당과 영적 자매들

Zustand를 개발한 Poimandres 팀은 독특하게도 상태 관리 라이브러리들의 이름에 독일어나 일본어 등의 외국어 단어를 붙이는 변태적인 네이밍 전통이 있다. 상태(State)를 뜻하는 독일어 'Zustand'를 필두로, 일본어로 바둑돌이나 점을 뜻하는 'Jotai(状態, 상태)', 일본어로 대리인을 뜻하는 'Valtio' 등이 그 예시다. 개발자들 사이에서는 '어설프게 영어로 이름을 짓는 라이브러리보다 독일어나 일본어로 기괴하게 지은 라이브러리가 훨씬 가볍고 성능이 좋으니, 다음 상태 관리는 산스크리트어로 검색해 봐라'는 주술적인 농담이 전설처럼 돌아다닌다.(...)

4.2. 곰돌이 아이콘의 안락사

Zustand의 마스코트는 나뭇잎을 들고 있는 귀여운 주황색 곰이다. Redux의 육각형 보라색 아이콘이 주는 차갑고 엄격한 대기업 SI 감성과 대비하여, 귀여운 곰돌이가 선사하는 안락함에 매료된 주니어들이 레거시 Redux 프로젝트에 들어가서 곰돌이를 몰래 심어두고 퇴사하는 기행을 일컫는다.

5. 여담

귀여운 주황색 곰돌이 마스코트: Zustand의 공식 마스코트는 동글동글하고 귀여운 주황색 아기 곰이다. 공식 깃허브에서는 이 곰돌이가 꿀단지(전역 상태)를 안고 있는 일러스트가 가득하며, 어마무시하게 단순한 코드의 맛과 귀여운 마스코트의 공조가 시너지를 내어 개발자들의 팬심을 자극했다.
Immer와의 유연한 통합: Zustand는 불변성(Immutability) 관리를 돕는 immer 라이브러리를 미들웨어 형태로 빌트인 지원한다. set((state) => { state.nested.object.count++ }) 같이 마치 가변 객체를 다루듯이 편하게 코드를 짜도, 내부적으로 찰떡같이 불변 상태로 복사하여 상태를 완벽 업데이트해 준다.
DevTools 및 Persist 미들웨어 완비: 겉보기에는 미니멀하지만, 상태를 로컬 스토리지에 자동으로 백업해 주는 persist 기능과 레거시 Redux DevTools 크롬 확장 프로그램에서 내 상태 흐름을 추적할 수 있도록 지원하는 devtools 어댑터를 공식적으로 모두 내장하고 있어, 대형 프로덕션 앱에서도 아무런 장애 없이 활약한다.

6. 관련 문서

실제로 Zustand를 쓰다가 Redux 프로젝트로 이직한 프론트엔드 개발자들이 첫 일주일 동안 입으로 쌍욕을 중얼거리며 리듀서 파일 5개를 만지는 고문을 견뎌냈다는 괴담이 커뮤니티에 실시간으로 접수된다. ↩