zustand를 상태관리 라이브러리로 선택한 이유

vue에 비하면 react는 상태 관리 라이브러리가 정말 많다.

Vue에는 Vuex라는 사실상 공식 솔루션이 있고, Composition API 이후로는 Pinia가 자연스러운 대안으로 자리 잡고 있지만
React는 최소 떠오르는 것만 5개였다...

 

리액트에 포함된 Context Api를 물론 최적화해서 쓸 수 있는 방향도 있다.

하지만 팀으로 작업을 하다보면 빼먹을 수도 있는 부분이 생기고 아무래도 개인으로 하는 것보다는 사이즈가 큰 

프로젝트이다보니 안전한 방향으로 갈 수 있는 라이브러리를 도입하기로 했다.

 

이러한 기준을 두고 라이브러리를 선택하기로 했다.

 

• 러닝 커브가 낮고 직관적인 API
• 협업 시 구조 파악이 쉬울 것
• 필요 시 확장성 확보 가능
• 타입스크립트와 궁합이 잘 맞을 것
• Next.js 환경에서도 안정적으로 동작할 것

 

하지만 라이브러리...종류가 너무 많고요

redux는 이전에 사용해본 경험이 있는데 Flux 아키텍쳐 기반이라 그런지 Vuex와 어느정도 비슷하다는 생각을 많이했었다.

하지만 러닝커브가 비교적 다른 라이브러리에 비해 높고 프로젝트 규모에 비해 무겁기도 했다.

지금 프로젝트에서 대량의 상태 관리가 필요한 부분이 아니였기에 리덕스는 제외했다.

 

recoil 같은 경우는 버전이 1도되지 않고 가장 최근 업데이트가 2년전인 것으로 보아 이제는 사용하지 않는 것이 좋다고 판단했다.

 

그리고 비교적 러닝커브가 낮은 라이브러리를 위주로 살펴보았다.

jotai, zustand, mobx

 

mobx 구글링을 해보니 요즘은 mobx를 많이 안 쓰는 추세인 것 같다. 그렇다는 건 최신 정보가 그만큼 적다는 것이다. 

최신 레퍼런스 부족 = 유지 보수 리스크로 이어질 수 있기 때문에 제외

 

그렇다면 남은 zustand와 jotai를 비교해보자 같은 개발자가 만든거라 확실히 다른 점이 존재한다.

Zustand

패턴: Flux 기반, 단일 store 구조 (탑다운 방식)

장점

• API가 정말 간단해서 보일러플레이트 거의 없음
• Redux DevTools, 미들웨어, 퍼시스트 등 필요한 확장성은 다 갖춰져 있음
• 필요한 컴포넌트만 리렌더되기 때문에 퍼포먼스도 꽤 잘 나옴
• 중앙에서 상태를 모아두는 방식이라 전체 구조 파악하기 쉽고 협업하기 편함
• 타입스크립트랑 궁합 좋고, Next.js 같은 환경에서도 문제 없이 잘 동작함

단점

• 상태가 너무 복잡해지거나, 아주 세밀한 제어가 필요한 상황에서는 Redux가 더 나을 수도 있음

Jotai

패턴: atomic 패턴 (bottom-up 방식)

장점

• 상태를 atom 단위로 나눠서 관리할 수 있고, 필요한 atom만 조합해서 사용 가능
• 각각의 atom이 독립적으로 동작해서, 필요한 상태만 구독하는 구조
• 거의 useState처럼 가볍게 쓰면서도 글로벌 상태처럼 관리 가능
• 타입스크립트 지원 좋고, SSR, React Native 등 다양한 환경도 잘 대응함

단점

• atom이 너무 많아지면 상태가 여기저기 흩어져서 전체 구조 파악이 어려울 수 있음
• 팀 단위로 작업할 땐, 어느 정도 상태 구조에 대한 컨벤션이 필요함

 

사실 개인적으로는 아토믹하게 접근해서 조합해서 사용을 하는 것을 해보고 싶었지만

지금 작업하는 프로젝트는 명확하고 일관된 상태 구조가 더 중요했고,

상태 수 자체도 많지 않아서 복잡하게 쪼개서 사용할 필요성은 없기에 팀원 전부에게 익숙한 zustand로 결정했다.

 

 

npm 트렌드를 봐도 zustand 요즘 가장 대세인 건 맞나보다

 

 

출처 : https://velog.io/@clydehan/%EC%96%B4%EB%96%A4-%EC%83%81%ED%99%A9%EC%97%90%EC%84%9C-Zustand%EC%99%80-Jotai%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C

jotai와 zustand에 대한 설명이 정말 잘되어있습니다. 한번 꼭 참고해보세요