전역 상태 라이브러리 Zustand 와 Jotai

Zustand와 Jotai 차이점 알아보기 위해 무려 올해 1월에 작성했던, 

이전 게시글 MVC패턴과 Flux패턴 이해하기

MVC 패턴과 Flux 패턴 이해하기

 

그래서 이게 왜 Zustand와 Jotai 차이점을 알기 위해 선행되어야하는건데.?

 

우선 Zustand와 Jotai의 상태 관리 방식에 대해 정리해보면

 

Zustand 

• 중앙 집중형, 단일 스토어 => Top-down
• Flux 패턴을 사용
• 중앙 스토어에서 모든 상태를 관리한다
• 상태와 업데이트 로직을 Store에서 한번에 관리, 각 컴포넌트는 Store에서 상태를 가져와 사용
• 상태가 복잡해질수록 스토어가 거대해지고 의존성이 커질 수 있다.
• 이를 보완하기 위해 하나 이상의 개별 스토어를 결합하는 방법이 있다
• 대규모 팀, 여러 개발자 협업시 적합

[Flux 패턴]
Action 이 발생하면 Dispatcher로 전달되고, Dispatch는 전달된 Action을 보고 등록된 콜백 함수를 실행하여 Store에 데이터를 전달한다

---

Jotai

• 분산형, 여러개의 작은 아톰(원자) 단위 => Botto-up
• Atomic 패턴, 각 아톰은 개별 컴포넌트에서만 구독, 사용됨 
• 필요에 따라 Atom들 간에 의존 관계를 형성해 파생된 상태를 만들 수 있다.
• useContext & useState와 유사한 개념
• 세밀한 리렌더링 제어 가능하여 성능 최적화에 유리
• 여러 atom으로 분산하므로 전체 상태 파악이 어렵고 디버깅이 복잡할 수 있다.
• 여러 컴포넌트에서 공유하려면 추가적인 작업이 필요할 수 있으므로 너무 세분화하면 관리가 어렵다 
•  필요에 따라 프로바이더를 추가해 특정 상태 범위를 제한하고 상태를 분리하여 관리하기 위해서 범위를 제한할 수 있다. 이는 여러 개의 인스턴스를 가지는 상태를 관리하거나, 특정 컴포넌트 트리에서만 상태를 사용하도록 범위를 설정하고자 할 때 유용하다. 즉, React의 특성에 더 잘 맞는 지원을 한다.
• 작은 규모 프로젝트에서 적합

 

아래 포스팅에서 정리를 잘해주셔서 상당 부분을 참조하였습니다

어떤 상황에서 Zustand와 Jotai를 선택해야 할까?