Mobx

Mobx

react 상태 관리 라이브러리
redux 다음으로 가장 많이 사용되고 있음

 

mobx 6 버전 이전에는 @데코레이터를 사용했지만

mobx 6 버전 부터는 데코레이터 사용을 지양하고 있음

 

Mobx 설치

npm install mobx

---

애플리케이션 상태 모델링

import { action, computed, makeObservable, observable } from 'mobx';

export default class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      isNegative: computed,
      increase: action,
      decrease: action,
    });
  }

  get isNegative() {
    return this.count < 0 ? 'Yes' : 'No';
  }

  increase() {
    this.count += 1;
  }

  decrease() {
    this.count -= 1;
  }
}

makeObservable

속성, 모든 객체, 배열, map, set으로 설정 가능

객체를 observable로 만드는 기본적인 방법은

makeObservable 를 사용해 속성마다 주석을 지정하는 것

 

action

state 를 수정하는 메서드를 표시함

 

computed

state 로부터 새로운 사실을 도출하고

그 결과값을 캐시하는 getter를 나타냄

---

사용자 인터페이스 구축

mobx-react, mobx-react-lite 설치

npm install mobx-react mobx-react-lite

 

store props 전달

const store = new CounterStore();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App myCounter={store} />
  </React.StrictMode>
);

 

observer

렌더링 중에 사용되는 모든 Observable 에 리액트 구성 요소를 자동으로 구독함

관련 observable 항목이 변경되면 컴포넌트가 자동으로 리렌더링 됨

const App = observer((props) => {
  const { myCounter } = props;

  return (
    <div>
      카운트: {myCounter.count}
      <br />
      <br />
      마이너스?: {myCounter.isNegative}
      <br />
      <br />
      <button>+</button>
      <button>-</button>
    </div>
  );
});

 

이벤트 발생으로 인한 Action 호출

<button onClick={() => myCounter.increase()}>+</button>
<button onClick={() => myCounter.decrease()}>-</button>

---

데코레이터 사용

mobx 6버전부터 데코레이터 사용을 지양하지만

이미 너무 많은 코드베이스와 튜토리얼이 데코레이터를 사용하기 때문에

mobx 6버전에서 데코레이터 사용 방법을 익혀두면 좋음

 

데코레이터를 사용하기 위해서는 타입스크립트 cra 패키지를 사용하거나

웹팩/바벨을 설치해서 설정해주어야 함