[Reference] 2024 상태 관리 라이브러리 비교
1. 상태 관리 라이브러리
(1) : 소개
- 2024-01-15 기준 (1년 트렌드)
| 접근 방식 | Flux | Proxy | Atomic |
|---|---|---|---|
| 설명 | 저장소(store) / 액션함수(action) | 컴포넌트에 사용되는 일부 상태를 자동으로 감지해서 업데이트 | React에 사용되는 state와 비슷하게 리액트 트리 안에서 상태를 저장하고 관리하는 방식 |
| 종류 | Redux, Zustand | Mobx, Valtio | Recoil, Jotai |
(1) Redux toolkit (RTK)
장점
- 유지보수 측면에 좋다 (상태 기반 업데이트)
Redux Devtools를 이용한 직관적인 전역 상태 확인 (디버깅에 용이)
단점
- 보일러 플레이트.
- 무거움 (비동기 요청과 같은 서드파티 라이브러리 필요)
(2) Zustand
장점
Redux Devtools사용 가능- 보일러플레이트가 적다
- Hook 기반
단점
- 자료가 적다
(3) Recoil
장점
- 사용이 간편
- Selector로 비동기 처리 가능
단점
- 업데이트 이슈
- 유지보수가 어려울수 있다 ( 상태 변경이 잦으면 상태 변경 예측이 어려움)
(4) Jotai
장점
- 사용이 쉽다
- 비동기 액션 처리 기능 내재
단점
- 자료가 많이 없다
(5) MobX
장점
- 간결한 코드
- 사용이 쉽다
단점
- 디버깅툴에서 가독성이 떨어짐
- 클래스형
| 특징 | Redux-toolkit | Recoil | MobX | Zustand | Jotai |
|---|---|---|---|---|---|
| 데이터흐름 | 단방향 데이터 흐름 패턴을 사용 | 단방향 데이터 흐름 패턴을 사용 | 양방향 데이터 바인딩 패턴을 사용 | 단방향 데이터 흐름 패턴을 사용 | 단방향 데이터 흐름 패턴을 사용 |
| 데이터변화감지 | 액션(Action)을 통해 변화를 감지 | 변화를 감지하는 상태Atom을 사용 | 오브젝트를Observer로 사용함 | React Hooks를 통해 상태 변화를 감지함 | React Hooks를 통해 상태 변화를 감지함 |
| 번들사이즈 | 대략 11.8mb | 2.21 MB | 4.19 MB | 324 kB | 404 kB |
| 비동기처리 | Redux-Thunk, Redux-Saga와 같은 미들웨어를 사용함 | 비동기 처리를 위한 별도의 라이브러리가 필요하지 않음 | MobX-React와 같은 미들웨어를 사용함 | 비동기 처리를 위한 별도의 라이브러리가 필요하지 않음 | 비동기 처리를 위한 별도의 라이브러리가 필요하지 않음 |
| 러닝커브 | Redux는 개념이 간결하고 직관적이지만 초기 학습이 어려움 | Recoil은 개념이 간결하고 초기 학습이 상대적으로 용이함 | MobX는 초기 학습이 비교적 용이함 | Zustand은 상태 관리와 관련된 개념이 간결하며 초기 학습이 상대적으로 용이함 | Jotai는 초기 학습이 비교적 용이함 |
| 커뮤니티 | 널리 사용되고 활발한 커뮤니티가 있음 | 아직은 상대적으로 새로운 상태 관리 도구이기 때문에 커뮤니티는 활발하지 않음 | 커뮤니티가 활발하지만 Redux보다는 작음 | 커뮤니티는 활발하지만 Redux보다는 작음 | 커뮤니티는 활발하지만 Redux보다는 작음 |
Top-Down 방식
| 비교 | redux-toolkit(rtk) | zustand |
|---|---|---|
| Provider 여부 | O | X |
| 보일러 플레이트 | 간단 | 상대적으로 복잡 |
| 다운로드 수 | 646k | 1798k |
| github Star | 20.6k | 8.3k |
Bottom-Up 방식
| 비교 | jotai | recoil |
|---|---|---|
| Key 사용 여부 | X | O |
| TS | O | X |
| 다운로드 수 | 130k | 303k |
| github Star | 9.6k | 17.4k |
