[React] 상태관리 라이브러리 - Redux | Zustand | Recoil | Jotai

상태관리 라이브러리를 상황에 따라 선택해야됨! 

각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 중요함! 

 

[ 라이브러리 분류 ] 

1) Flux: Redux, Zustand

2) Proxy: Mobx, Valtio

3) Atomic: Recoil, Jotai

 

Redux 

- 모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 리듀서에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에서 좋음 

- 서버 사이드 렌더링이 가능

- redux toolkit

 

[단점]

- 보일러 플레이트와 장황한 코드가 필요함 

- 방대한 코드량, 익숙하지 않은 원리와 직관적이지 않은 코드 => 러닝 커브 높음 

- 리액트 전용 라이브러리가 아니기 때문에, 리액트 내부 스케줄러에 접근하기 어려웠음

- 비동기 처리를 위해서 추가적인 라이브러리의 설치가 필요함 (redux-thunk, redux-saga) 

 

 

Zustand

https://github.com/pmndrs/zustand?tab=readme-ov-file

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

 

- 클로저를 이용하여 스토어를 제공, 발행/구독(pub/sub) 기반 

- flux 원칙을 적용하여, 간단하고 빠르게 확장이 가능함 

- redux의 Redux DevTools 로 디버깅이 가능

- Hook 기반으로 만들 수 있음(useState와 비슷한 API 제공)

- 서버 상태나 비동기 데이터를 다룰 때도 간편하게 관리

 

[단점] 

- 복잡한 상태 관리가 필요할 때 성능 최적화가 어려움

- 상태가 커지거나 복잡해지면, 모든 상태를 한 곳에 몰아서 관리하는 것보다 구조적으로 더 분리하고 관리하는 것이 어려움

 

Recoil 

- meta에서 만듬 (facebook) 

- react 친화적인 문법

=> 리액트의 useState와 유사하게 동작하는 get/set 인터페이스로 사용할 수 있는 api 제공

- atom : state(상태) 단위, 업데이트와 구독이 가능함 

-> atom이 업데이트 되면 해당 atom을 구독하고 있는 컴포넌트들의 리렌더링이 발생됨 

- selector로 비동기 처리가 가능 

(Selector는 순수 함수여야 하고, Promise를 반환해야 한다)

 

[단점] 

- atom이 많은 곳에서 구독된다면, 사이드 이펙트가 발생 할 수 있음

- 현재 1년 넘게 업데이트가 안되고 있음 

=> atom과 selector가 많아지면 의존성 파악과 예측이 어려워짐 

=> 어느 컴포넌트가 언제 전역 상태를 변경하는지 알기 어려움

=> atom의 key값 -> 보일러 플레이트 발생

 

==> 실무에서는 CRUD를 조합한 다양한 비동기 처리가 필요한데, 복잡한 것을 Recoil로 처리하기에는 무리가 있을 것

 

Jotai

: recoil의 개선된 버전 

https://jotai.org/

Jotai, primitive and flexible state management for React

 

- atom 기반 상태 관리

- API가 직관적이고 간단하여 사용하기 쉬움

=> useState와 유사한 useAtom사용 

- atom을 통해 비동기 상태도 쉽게 처리할 수 있음

 

[단점]

- 상태의 수가 많아지면 각 atom를 어떻게 분리하고 관리할지에 대한 고민이 필요

- 상대적으로 신생 라이브러리이기 때문에, 일부 기능이 부족

 

 

결론

다 알아야 하고, 상황에 맞게 라이브러리를 골라 쓰는 능력을 키워야함..! 

(zustand, redux 더 공부하기.., recoil-seletor 더 공부하기..) 

 

 

 

Reference

https://yozm.wishket.com/magazine/detail/2233/

https://velog.io/@iberis/%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EB%B9%84%EA%B5%90-Redux-vs-Recoil-vs-Zustand-vs-Jotai

https://github.com/pmndrs/zustand?tab=readme-ov-file

https://www.jeong-min.com/58-react-state-management/