전역 상태 관리 라이브러리, 무엇이 좋을까?

[guesung]

전역상태 관리 라이브러리 후보

1. Context
2. Redux
3. Zustand
4. Recoil

[guesung]

1. Context

Context API는 Selector가 없어서, 최상단 state를 업데이트하면 하위의 모든 컴포넌트가 리렌더링된다는 치명적인 성능이슈 존재

• 참고

[guesung]

2. Redux

1. 암도적인 점유율

특징

1. Redux = Reducer + Flux
   • Flux패턴을 사용하여, Action이 발생하면 Dispatcher에 의해 store에 변경된 사항이 저장 > 그 상태에 의해 view가 변경되는 단방향 구조
2. store를 하나만 두는 것을 권장
3. state가 업데이트 되면 이를 추적하는 view도 자동으로 업데이트
4. Redux Toolkit를 이용하여 Redux의 수많은 보일러 플레이트 문제 해결

[guesung]

확실히 Redux가 압도적인 점유율이긴 하다 .. !

[guesung]

3. Recoil

장점

1. 간결한 사용법 (atom구조). useRecoilState는 useState와 사용법 유사
2. 가볍고 직관적
3. 비동기 기반으로 작성되어 동시성 모드 지원
   • 동시성모드 : 데이터 흐름이 여러개 있을 때 렌더링 동작의 우선순위를 정하여 적절한 시점에 렌더링 해주는 기능

특징

1. 핵심적인 개념은 Atom. Atom은 Recoil에서 상태를 나타냄. 컴포넌트들이 구독할 수 있는 단위
2. Atom.> Selector > View의 데이터 흐름

[guesung]

참고

[guesung]

단점

1. 예측하기 어려운 전역상태 변경
   • 손쉬운 전역상태관리의 단점이자 장점
2. 공식적인 개발자 도구가 없음

[guesung]

3. recoil은 facebook/Recoil이 아니고 facebookexperimental/Recoil이다. 버전 1.0.0도 출시하지 않은 상태이다.
   참 사용하기 편하긴 하지만 .. 안정성 측면에서 많이 떨어진다.
4. 공식적인 devtool이 없다.

[guesung]

4. Zustand

장점

1. 보일러플레이트 코드 적음
2. 사용이 간편
3. dev tool 지원

특징

1. Redux를 제외한 Recoil, jotai에 비해 점유율이 높고, 꾸준히 상승 중
2. Flux 패턴(Redux와 동일)
   • 사용자가 Action을 만들고, Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향 흐름
3. Sub/Pub(발행/구독) 모델
   • 스토어의 상태 변경이 일어날 때 실행할 Listener를 모아두었다가(Sub) 상태가 변경되었을 때 등록된 Listener들에게 상태가 변경되었다고 알려 줌

[guesung]

참고

[guesung]

�RTK vs Zustandard

• 출처
• RTK에 비해 압도적으로 작은 크기
• 설정이 RTK에 비해 간단

[guesung]

지금까지 Zustand를 제외한 Redux, Recoil, Context API 모두 사용해보았다. Redux는 보일러 플레이트 코드도 많고, 제일 안니옫가 있었다. Recoil은 useState처럼 사용하기 간편하다는 장점이 있지만, 지금 이 프로젝트를 장기적으로 보았을 때 상태를 관리하고 예측하기가 어려워질 것이라 생각한다. Context API는 하위의 모든 컴포넌트가 리렌더링된다는 치명적인 단점으로 인해 선택하기 힘들 것 같다.

Zustand를 사용해보지 않았기도 했고, 프론트엔드 파트인 호균님이 권하기도 했다. 또한, 코드가 직관적이고 Redux와 동일한 Flux패턴이라고 한다. 한 번 이번에는 Zustand를 사용해볼까?

[guesung]

디프만의 프로젝트 5개를 둘러보았는데, 4개가 recoil을 사용하고 있다. 이러한 규모의 프로젝트에서는 recoil이 더 적합한 것일까?
recoil이 확실히 사용하기 편하긴하다.

[guesung]

컴포넌트 중심

1. Recoil
2. Jotai

데이터 중심

1. Redux
2. Zustand
3. MobX

[guesung]

참고

[guesung]

아무래도, Recoil은 프로젝트의 규모가 커진다는 것을 고려했을 때, 적합하지 않은 라이브러리이다. Redux를 사용하기에는 BoilerPlate Code가 너무 많다.

Zustand는 사용하기도 간단하고, Redux와 같이 Flux패턴을 사용한다.

그리고, 처음 써본다. Zustand를 써봄으로써 새로운 노하우와 경험이 또 쌓일 것이다.