기술 공유 React의 전역 상태 관리 도구들

프로젝트에서 사용할 전역 상태 관리 도구를 결정하기 위해,
주요 전역 상태 관리 도구들의 특징을 조사 및 비교하였습니다.

고려 대상은 Redux, Recoil, Zustand, Jotai, MobX, (+⍺ Context API) 였으며,
최종적으로 Zustand를 선택하였습니다.

1. Redux

• 장점
  • Flux 패턴으로, 구조가 명확함 -> 데이터 플로우 예측이 쉬움
  • Redux Devtools 지원 -> 디버깅이 편리
  • 가장 많이 사용되는 라이브러리로, 학습을 위해 선택하는 것도 좋을 듯
• 단점
  • 방대한 보일러 플레이트 코드
  • reducer, dispatch 등 생소한 개념으로 인한 러닝커브가 높음

2. Recoil

• 장점
  • React Hooks와 매우 유사하기 때문에, 배우기 쉬움
  • Context 기반이지만, 특정 상태가 변했을 때 그 상태랑 관련된 컴포넌트만 자동으로 리렌더링해줌
  • Selectorfh API Call에 대한 캐싱 가능 -> 동일 응답에 대해 추가 호출 X -> 성능 상 이점
• 단점
  • 아직 메모리 누수 성능 문제가 해결되지 않음
  • 아직 1.0 버전이 출시되지 않음

3. Zustand

• 장점
  • Flux 패턴으로, 구조가 명확함 -> 데이터 플로우 예측이 쉬움
  • Redux Devtools와 호환됨
  • 보일러 플레이트 코드 양이 적음
  • 번들 크기가 작음
  • 배우기 쉬움(Redux의 쉬운 버전이라는 평이 많다.)
  • Provider로 감싸지 않기 때문에, 리액트와의 결합도가 낮다.
  • 단일 Store
  • Context 기반이 아니기 때문에, 리렌더의 걱정이 없다.
• 단점
  • 자체 Devtools 지원 X

4. Jotai

• 장점
  • recoil과 문법이 비슷한데, 더 쉬움
  • Context의 리렌더링 문제를 해결하기 위해 만들어진 React 특화 상태관리 라이브러리
  • 기본적으로 re-rendering 문제를 줄여주고,selectAtom, splitAtom같은 re-rendering을 줄이기 위한 유틸들도 지원함
  • Provider 안써도 됨
  • Primitive atoms 형태 (recoil과 비슷)
• 단점
  • 타 도구들에 비해 사용자가 적은편이라, 자료가 상대적으로 부족함

5. MobX

• 장점
  • 데코레이터 제공
  • 보일러플레이트 코드 양 적음
• 단점
  • 보완 예정
• 특징
  • 객체지향 스타일
  • 스프링과 구조가 비슷해서 서버 개발자가 쓰기에 쉽다고 한다.

(+⍺) Context API

• Context API는 결코 전역 상태 관리 도구를 대체할 수는 없다. (참고한 글)
• 장점
  • React 내장
• 단점
  • 불필요한 재렌더링 발생
  • 연쇄적인 Provider -> Provider hell 발생 가능 (Devtool로 확인 시 드릴링이 계속해서 일어남)