상태 관리 도구 Zustand vs Jotai vs Valtio 비교

Redux, MobX 후발 주자로 나온 상태 관리 라이브러리 세 종을 비교해 보았습니다. (Recoil은 Experimental 단계이므로 후보에서 제외하였습니다.) 1. Zustand Mobx, Redux와 비슷하게 전역 상태를 Top-down 접근 방식으로 관리합니다. 가령 블로그를 위한 스토어를 모델링한다고 가정하면 큰 틀(Blog)에서 시작해서 디테일(Posts, Post..)하게 모델을 만들어나갑니다. 이러한 방식은 직관적이고 Redux로 상태 관리를 해 본 사람이 많기 때문에 팀에 도입하기도 쉽다는 장점이 있습니다. 또다른 특징으로는 React 외부에서 스토어에 접근이 가능합니다. 이는 React 외 다른 자바스크립트 프레임워크에서도 사용이 가능함을 의미합니다. 덧붙여, 불변성 관리를 도와주는 immer 라이브러리와의 궁합이 좋은 것으로 알려져 있습니다. - Flux 패턴 - 큰 규모의 앱에 권장 - NPM Trend: 96만 (1위) - 용량: 1.1kb (1위) 2. Jotai Zustand와 완전히 반대로, Bottom-up 방식으로 상태를 관리합니다. 먼저 세분화된 상태(Atom, 원자)를 정의한 다음, 셀렉터에 결합하여 더 큰 상태를 만듭니다. - Atom 패턴 - 중~대 규모의 앱에 권장 - NPM Trend: 22만 (2위) - 용량: 4.7kb (3위) 3. Valtio 전역 상태를 "직접" 변경할 수 있도록 허용하는 특징을 갖고 있습니다. 따라서, 상태 변경이 다른 라이브러리에 비해서 심플합니다(setState 같은 함수 호출필요 없이, state.count++ 하면 바로 반영). - Proxy 패턴 - 소규모 앱에 권장 - NPM Trend: 5.6만 (3위) - 용량: 2.7kb (2위) [결론] Zustand는 대부분 앱에 적합하며 우리에게 친숙한 Top-down 방식으로, 여러개의 스토어를 도메인 단위로 쪼개서 쉽게 관리할 수 있습니다. 반면에 작은 상태들을 대량으로 읽거나 쓰는 작업이 필요한 성능 중심 앱의 경우 Bottom-up 방식의 Jotai가 적합해보입니다. Valtio는 개인 프로젝트에서 간단하게 상태 관리가 필요할 때 사용하면 좋을듯 합니다. 만약 규모가 있는 새 프로젝트를 설계한다면 서버 상태는 React Query로, 로컬 상태는 Zustand+immer로 관리하면 이상적일것 같네요. 마지막으로 레딧에서 한 유저가 남긴 글을 인용하면서 글 마치겠습니다. “Zustand, Jotai and Valtio are modern implementations of the three main state paradigms: flux, atoms and proxies. If you know which of these paradigms suits the project best you can’t go wrong. they don’t compete, they just allow you to pick the right tool for a certain task.”