상태관리 라이브러리인 Zustand 에 대하여

 

 

주스탠드(zustand)는 독일어로 ‘상태’라는 뜻을 가졌고, 간결한 플럭스(Flux) 원칙을 바탕으로 작고 빠르게 확장 가능한 상태 관리 라이브러리다. 조타이(Jotai)를 만든 카토 다이시가 주스탠드도 만들어 관리하고 있다. 주스탠드는 특정 라이브러리에 종속되어 만들어진 도구는 아니므로 바닐라 자바스크립트에서도 사용이 가능하다.

주스탠드는 발행/구독 모델(pub/sub)을 기반으로 이루어져 있다. 스토어의 상태 변경이 일어날 때 실행할 리스너 함수를 모아 두었다가(sub), 상태가 변경되었을 때 등록된 리스너에게 상태가 변경되었다고 알려준다(pub).

그리고 스토어를 생성하는 함수 호출 시 클로저를 사용한다. 이로 인한 특징으로 상태를 변경, 조회, 구독하는 인터페이스를 통해서만 상태를 다루고, 실제 상태는 생명 주기에 따라 처음부터 끝까지 의도하지 않는 변경에 대해 막을 수 있다는 점이 있다.

주스탠드 사용법은 정말 간단하다. 먼저 스토어를 만들고 그 안에 원시 타입, 객체, 함수 등을 넣는다.

그다음 그걸 컴포넌트와 바인딩 하면 끝이다. 이때는 useBearStore()라는 API를 사용한다.

확실히 러닝 커브가 낮은 점이 큰 장점이다. 컨텍스트처럼 Provider 같은 것으로 감싸줄 필요도 없다. 그리고 컨텍스트와 달리 오직 변화가 일어나는 경우에만 리렌더링이 일어난다.

리코일과 비교해 보면, 리코일에서는 setXXX 형태로 아톰을 바꿔주는 로직을 보통 컴포넌트 안에서 해주거나 커스텀 훅으로 빼서 해주는데, 주스탠드는 스토어에서 바로 할 수 있어 편리해 보인다. 이외 다양한 미들웨어도 지원한다. 예를 들어, immer를 주스탠드 차원에서도 미들웨어로 쓸 수 있다. 복잡한 객체의 업데이트를 비교적 깔끔하게 처리할 수 있는 것이다.

또한 persist라는 미들웨어도 지원하는데, 스토리지에 데이터를 저장할 수 있는 기능을 다음과 같이 간단하게 사용할 수 있다.

주스탠드의 다른 특징으로 일시적 업데이트(Transient Update)가 있는데, 상태가 자주 바뀌더라도 매번 업데이트가 일어나지 않고 리렌더링을 제어할 수 있는 기능이다. 리액트에 종속되지 않은 도구여서 가능한 점이다.

주스탠드는 설계적으로 탑다운 방식으로 전역 상태를 접근하기 때문에, 전체적인 오버뷰에서 디테일 세부사항으로 스토어 모델링을 하는 것이 좋다. 예를 들어, 블로그를 위한 스토어를 만든다고 하면 블로그 > 포스트 > 작가, 제목, 내용 이런 식으로 말이다.

이렇게 강력한 장점을 가진 주스탠드의 단점은 무엇일까? 일단 성능이 중요한 앱에서 주스탠드와 같은 탑다운 방식은 적합하지 않다. 그리고 비교적 생긴지 얼마 되지 않은 도구이기 때문에, IDE 등에서 쓸 수 있는 익스텐션, 플러그인, 스니펫 등이 많이 없다는 점도 단점이다. 공식 문서도 깃헙 리드미 정도만 있는데, 다른 도구들처럼 충분한 설명이 레퍼런스로 있으면 더욱 좋을 것 같다.