redux vs mobx vs recoil

프론트앤드 상태관리 라이브러리는 여러가지가 있고, 그 중 리액트 상태관리 라이브러리의 대표주자는 아마 redux가 아닐까 한다. 그 뒤를 바짝 추격하는 친구는 mobx. 하지만 리액트를 만든 페이스북에서 또 만들어준 상태관리 라이브러리가 있는데, 이름하여 recoil이다. 리액트를 만든 곳에서 리액트를 위한 상태관리를 만들었다니 얼마나 리액트 친화적으로 만들었을까?

실제 사용 경험은 mobx밖에 없지만 redux와 mobx 그리고 recoil의 차이를 정리해보려고 한다-!

참고로 2022년 2분기 기준 근 1년간 추세는 다음과 같다. 리덕스가 압도적이며, 보이지는 않지만 리코일이 미미하게나마 상승곡선을 그리고 있다.

https://www.npmtrends.com/recoil-vs-redux-vs-mobx

mobx vs recoil vs redux | npm trends

---

redux

용어정리

action

상태를 바꾸는 방식, 변경할 데이터로 action 객체와 type 필드로 구성되어 있다.

dispatch

store 내장 함수 중 하나로 액션을 발생시킬 때 사용된다. action 객체를 받으며, 리듀서를 불러주는 역할을 한다.

reducer

순수 함수로 작성되어야 하며, 현재 상태와 전달받은 액션 객체를 통하여 새로운 상태를 반환시켜준다. 즉, 구체적으로 어떤 값으로 변경시킬지 정의가 되는 부분이다.

store

상태 및 함수 등을 가지고 있는 중앙 저장소이다.

 

리덕스 세가지 원칙 (+ 특징)

1. 모든 상태는 하나의 스토어 안의 객체 트리 구조로 저장한다.
2. 상태는 읽기전용이다.
   직접 변경이 불가하며, 액션을 통한 변경이 가능하다.
3. 순수 함수로 작성되어야 한다.
   순수 함수란 외부 변수의 값을 변경시키지 않는 함수라는 의미로 이전 상태를 변경하는 대신 새로운 상태의 객체를 리턴시켜주어야한다.
4. 단방향 데이터 흐름을 가지고 있다.
   store로 상태를 중앙에서 관리하고, 복잡한 계층을 필요로 하지 않는다.
5. 상태를 보다 쉽게 예측할 수 있다.
   순수함수로 예측 가능한 범위 내에서만 변경이 된다.
6. 가장 많이 사용하는 라이브러리로 커뮤니티가 잘 형성되어있다.

 

mobx