MobX란?

• 상태관리 라이브러리
• React와 함께 사용하는 상태 관리 라이브러리중 Redux와 MobX가 가장 많이 사용되고 있다
• MobX는 Redux와 마찬가지로 상태 관리 라이브러리이지 React 전용 라이브러리는 아니다
  • Redux는 react-redux, MobX는 mobx-react 라이브러리를 추가적으로 사용해 React에서 쉽게 사용할 수 있다

장점

• 기본적으로 ES6 Class 방식을 지원하고 권장하여 객체지향적으로 코드를 작성할 수 있다
• 상태관리를 위한 Store와 Component 사이에 연결을 위해 Redux와 달리 번잡한 보일러플레이트 코드를 데코레이터를 사용해서 코드를 깔끔하게 작성할 수 있다
  • Redux는 상태를 변경하기 위해 reducer, action등 코드를 작성해주어야하고, 프로젝트에 규모가 커짐에 따라 이러한 코드들이 꼬여서 점점 스파게티 코드가 되어간다
• Mutable한 상태변경이 가능하다.

Redux vs MobX

• Redux는 함수형 프로그래밍에 영향을 받은 라이브러이다. MobX는 OOP를 권장하는 라이브러이다. OOP 익숙한 많은 개발자들이 쉽게 접근하고 사용할 수 있다.
• Redux는 구조상 Store와 Component의 연결을 위해 번잡한 코드들을 계속 작성해주어야한다. MobX는 이러한 코드를 데코레이터를 사용하여 깔끔하게 작성할 수 있다
• Redux는 Store의 상태를 Immutable하게 변경하기 때문에 항상 새로운 상태를 반환해야한다(Read Only). MobX는 Mutable하게 변경이 가능하다(Read and Write)
  • Redux의 이러한 특성 때문에 상태를 Immutable하게 변경하기 위해 추가작업이 필요한데 Destructuring을 활용해 새로운 상태를 반환하거나, Immutable.js 라이브러리를 이용해서 Immutable한 데이터 구조를 활용하게 된다. (라이브러리 학습이 또 필요)
• 비동기 처리를 위해서 Redux는 별도의 라이브러리를 추가적으로 사용해야한다.(redux-thunk, redux-saga). MobX는 async action을 지원해서 async/await 문법을 사용해 깔끔하게 처리가 가능하다.

MobX 주요개념

MobX의 기본 동작방식은 위의 사진과 같다. 상태를 변경하기 위해서 event와 같은 **action(행동)**이 발생하면 **상태(Observable)**가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 **연산된 값(Compute Values)**을 계산하거나 적절한 **reaction(반응)**을 수행한다.