사내 프로젝트에 사용할 전역 상태관리 라이브러리를 결정하기 위해 상태 관리 라이브러리를 비교하며 적었던 짧은 문서와 개인적 의견입니다! 결과적으로는 Mobx를 도입하여 사용하게 되었습니다.

Redux

Context API가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReducer라는 Hook이 존재하기 전부터 만들어진 라이브러리이다. Context API가 개선되기 전에는 리덕스가 글로벌 상태 관리 용도로 많이 사용되었다.

🧑‍💻 action은 데이터 묶음을 reducer로 보내고 reducer는 store를 갱신한다.

• action, reducer, dispatch
• 상태를 저장하기 위한 데이터 구조로 자바 스크립트 객체를 가지며 업데이트를 수동으로 해야합니다.
• 하나의 루트 리듀싱 함수를 가지는 하나의 store가 존재한다. reducer를 여러 개로 분리할 경우 combineReducers 등으로 합쳐 주어야 함.
• 구조상 Store와 Component의 연결을 위해 보일러플레이트가 요구됨.
• Store의 상태를 Immutable하게 변경하기 때문에(객체의 불변성이 중요하게 요구됨) 항상 새로운 상태를 반환해야 함(Read Only). 이러한 특성으로 인해 Immutable.js나 Immer.js 등의 라이브러리와 같이 사용되는 경우가 많음.
• 비동기 처리를 위해서는 별도의 라이브러리 추가 사용이 필요(redux-thunk, redux-saga 등)
• 예제에서 사용하는 패턴이 다양하기 때문에 실제 사용 시 어떤 패턴을 사용할 것인지 논의가 필요(store와 reducer를 분리할 것인지, 아니면 ducks 패턴을 사용할 것인지 등)
• Mobx에 비해 많은 학습 자료와 라이브러리가 존재하며, 디버깅 툴이 강력함.

Mobx

모든 상태 변화가 일어나는 변화를 자동으로 추적해주는 전역 상태 관리 라이브러리.

🧑‍💻 store의 observable로 상태를 가지고 action으로 갱신.

• 여러 개의 store를 가질 수 있음. 또한 리듀서와 액션 함수 등이 필요하지 않음.
• observer를 통해 변경 사항을 자동으로 추적함. 즉, 업데이트가 자동으로 추적되므로 더 쉽게 사용할 수 있음.
• async action을 지원하여 별도의 라이브러리 없이도 async/await 문법을 사용해 비동기 처리가 가능함.
• 디버깅 툴이 redux devtool에 비해 기능이 적고 가독성이 낮음.
• Redux보다 보일러플레이트 코드가 적으나, 체계적인 구조가 요구되며 실시간 상태 변화가 많은 프로젝트에서는 단일 스토어를 강제하지 않고, 불변성 유지를 위한 노력이 불필요한 Mobx의 특성 때문에 코드 관리가 어려워질수도 있다는 의견이 있다. 🔗
• mobx-react는 v6 이상부터 decorator 문법을 더 이상 지원하지 않음. 현재 존재하는 레퍼런스들은 데코레이터 문법을 이용하여 작성된 레퍼런스들이 많은데, 이 때문에 레퍼런스를 참조할 시에는 공식 문서와 비교하며 주의 깊게 살펴봐야 할 것 같음. 공식 문서 또한 Class 형식으로 작성되어 있어 공식 문서를 참조할때도 주의가 필요. 🔗

Recoil

facebook에서 만든 상태 관리 라이브러리. context API 기반으로 만들어졌으며 호환성이나 단순함을 위해 React에 내장된 상태 관리 기능을 사용하는 게 바람직하다는 철학을 바탕으로 만들어짐.

• 비동기 처리를 기반으로 작성되어 Redux처럼 다른 비동기 처리 라이브러리에 의존할 필요가 없음.
• atom - selector 를 거쳐 컴포넌트로 전달되는 하나의 data-flow를 가지고 있어, 복잡하지 않은 상태 구조를 가지고 있음.
• useState, useEffect와 유사한 hook(React 친화적 문법)으로 러닝 커브가 낮고 쉽게 사용할 수 있다.
• 디버깅 툴의 불완전성, 개발된지 오래되지 않은 라이브러리이기 때문에 공식 문서에 있는 몇몇 기능도 불안정한(UNSTABLE) 경우가 있다. (API가 실험적, Github 리포지토리 자체도 facebook/Recoil이 아니고 facebookexperimental/Recoil이다.)

정리

react-redux 7 이상부터는 useSelector , useDispatch 등의 hook으로 인해 전보다 보일러플레이트가 줄어들고 간편하게 사용할 수 있게 되었으나, 여전히 switch문을 사용하여 작성하는 reducer 나 불변성 유지, 비동기 처리를 위해 사용하는 라이브러리 등으로 인해 여전히 러닝커브가 높다고 생각됩니다.

Mobx가 레퍼런스가 Redux보다 적으며 참고 시에도 주의 깊게 살펴보아야 한다는 단점이 있지만, 그럼에도 불구하고 Redux에 비해 간략한 개념과 적은 코드, 비동기 처리의 간편성으로 초기에 쉽고 빠르게 사용이 가능할 것 같습니다.

Recoil은 개인적으로 사이드 프로젝트에서 만족스럽게 사용하고 있는 라이브러리지만, 실무에 도입하기에는 아직 실험적이고 불안정한 부분이 많다고 판단됩니다.

대형 프로젝트에서 Redux를 사용하느냐, Mobx를 사용해야 하느냐는 사용자마다 의견이 갈렸습니다. 두 라이브러리 모두 훌륭한 라이브러리지만, ‘다양한 상태 관리 라이브러리들이 등장하고 있는 현 상황에서 굳이 Redux만을 고집할 필요가 없다’ 라는 의견이 등장하는 추세고 개인적으로도 이 의견에 동의하고 있습니다. 👶

참고자료

• https://lunit.gitbook.io/redux-in-korean/ Redux 공식 문서
• https://ko.mobx.js.org/README.html Mobx 공식 문서
• https://recoiljs.org/ko/docs/introduction/getting-started/ Recoil 공식 문서
• https://techblog.woowahan.com/2599/ 우아한형제들 기술블로그
• https://medium.com/@punkyoon/mobx를-사용하면-안되는-경우-a49d24b44580 Mobx를 사용하면 안되는 경우
• https://rokt33r.github.io/posts/why-i-replace-redux-with-mobx 왜 내가 Redux 대신 Mobx를 쓰게 되었나
• http://noartist.com/redux를-버리고-mobx로-간-이유/ redux를 버리고 mobx로 간 이유
• https://ridicorp.com/story/how-to-use-redux-in-ridi/ 리덕스 잘 쓰고 계시나요?
• https://satisfactoryplace.tistory.com/274 Mobx 함수형으로 사용해보기
• https://jforj.tistory.com/154 함수형 컴포넌트에서 Mobx 사용하기
• https://velog.io/@kskim625/React-상태-관리-Redux-Mobx-Recoil (React 상태 관리 (Redux, Mobx, Recoil)