Jotai VS Zustand

상태관리 설명 요즘 상태관리에 대한 접근 방식을 3가지로 나눠서 볼 수 있을 것 같습니다.
Flux (Redux, Zustand)
일반적으로 사용하는 Flux 방식으로써, 저장소(store)/액션함수(action)/리듀서 등을 통해서 상태를 업데이트 하는 방식: 하향식(top-down)

Proxy (Mobx, Valtio)
컴포넌트에 사용되는 일부 상태를 자동으로 감지해서 업데이트 하는 방식
Atomic (Jotai, Recoil)
React에 사용되는 state와 비슷하게 리액트 트리 안에서 상태를 저장하고 관리하는 방식: 상향식(bottom-top)

하향식(top down) 접근법: 리덕스를 포함한 이전까지 나온 상태관리 솔루션
필요한 상태를 모두 컴포넌트 트리 상단의 Store가 가지고 있으면서 하위 컴포넌트에서 필요한 상태를 가져다 쓰는 방식

상향식(bottom up) 접근법
리액트 hook의 등장과 함께 작은 상태나 로직을 가진 hook들을 조합해가며 복잡한 상태까지 관리하는 방식이 유용할 수 있다고 알려짐에 따라서 상향식 접근법이 논의됨에 따라서 원자 단위의 스토어를 가지게 됨.
원자가 변경된 경우 원자를 구독한 컴포넌트가 리렌더링 되는 방식
recoil, jotai!
상향식 vs 하향식

Jotai:

• Jotai 는 Context의 re-rendering 문제를 해결하기 위해 만들어진
  -React 특화 상태관리 라이브러리atomic 한 상태관리 방식으로 구성됨 (bottom-up 방식)
  -리액트 기본 state 함수인 useState 와 유사한 인터페이스

사용목적: 단순성과 유연성 그리고 코드스필릿 서스팬스를 적용하는데 적합하기에 최적화를 봐라봐서 우리팀을 조타이를 선택!
그리고 리액트 쿼리를 사용하기로 해서 조타이는 리액트쿼리와 통합되어 있다

Zustand는 무엇인가?

Zustand는 독일어로 '상태'라는 뜻을 가진 라이브러리이며 Jotai를 만든 카토 다이시가 제작에 참여하고 적극적으로 관리하는 라이브러리이다. 아래의 특징을 가지고 있다.

특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (Transient Update라고 한다.)
동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)

결론

Zustand는 기본적으로 단일 Store입니다. (여러 Store을 만들 수 있지만 분리되어 있습니다). Zustand는 외부 저장소이며 후크는 외부 세계를 React 세계에 연결하는 것입니다.
Jotai는 원시 원자이며 그것들을 구성합니다. 이런 의미에서, 그것은 멘탈 모델을 프로그래밍하는 문제입니다. useState+useContext를 대체하는 것으로 볼 수 있습니다. 여러 컨텍스트를 만드는 대신 원자는 하나의 큰 컨텍스트를 공유합니다.

https://11001.tistory.com/218
https://seungahhong.github.io/blog/2022/06/2022-06-14-jotai/
https://seungahhong.github.io/blog/2023/09/2023-09-10-react-state/