MobX

MobX란?

• React와 함께 사용하는 State(상태)관리 라이브러리 중, Redux 다음으로 많이 사용하고 있는 라이브러리
• Component와 State를 연결하는 Redux와는 달리 테코레이터(어노테이션)을 사용
• Observable(관찰 대상)이 MobX가 동작하는 가장 기본이 되는 개념

MobX 사용법

1. mobx 설치

   yarn add mobx mobx-react
   

2. Component에 추가

   import React, { Component } from 'react';
   import { decorate, observable, action } from 'mobx';
   import { observer } from 'mobx-react';
   
   // observer decorator가 없으면 다른 컴포넌트에서 state가 바뀐 것을 알지 못한다.
   @observer
   class Counter extends Component {
       @observable number = 0;
   
       @action
       increase = () => {
           this.number++;
       }
   
       @action
       decrease = () => {
           this.number--;
       }
   
       render() {
           return (
           <div>
               <h1>{this.number}</h1>
               <button onClick={this.increase}>+1</button>
               <button onClick={this.decrease}>-1</button>
           </div>
           );
       }
   }
   

느낌

개인적으로는 redux 사용할 때에 어려웠다. 그런데 홈페이지 유지보수 때문에 MobX를 처음 접하게 되었는데 이게 더 쉬워보였고, @observer를 사용하면 state가 바뀐 컴포넌트 말고도 다른 컴포넌트에서도 render()가 다시 호출되는 점이 마음에 들었다. 내가 사용해본 결과, reduxsms mapStateToProps 등등… 이런 개념들을 몰라도 쉽게 state를 저장하고 업데이트가 되는 Mobx가 훨씬 사용하기 쉽고, 편했다.

참고

• https://mobx.js.org/index.html
• https://mobx.js.org/refguide/observer-component.html