MobX - 간단하고 확장 가능한 상태 관리

간단하고 확장 가능한 상태 관리, 쉽고 확정성 있게 만들어 주는 검증된 라이브러리

개발자 채용 공고에서 Redux와 함께 가장 많이 보이는 상태관리 라이브러리 중 하나, 배워두면 두고두고 써먹을 수 있는 라이브러리라고 할 수 있다.

공식 한국어 문서: https://ko.mobx.js.org/README.html

MobX에 대하여 · MobX

MobX 5 버전 까지는 @ 데코레이터를 사용했지만 MobX 6 부터는 데코레이터 사용을 지양하는 중.

 

아래는 공식 문서의 소개 페이지의 일부

특징

작동 원리

event는 observable state를 변경시키는 action을 호출하고, observable state의 변경 사항은 computed value(연산)과 변경 사항에 따라 달라지는 side effect(리랜더링 같은 것)에 전파된다.

설치

React 바인딩에는 함수형 컴포넌트만 지원하는 mobx-react-lite와 클래스 기반 컴포넌트도 지원하는 mobx-react 이렇게 총 두가지 종류가 있습니다. 사용 목적에 맞도록 하단의 Yarn 또는 NPM 커맨드를 참고하세요.

Yarn: yarn add mobx
NPM: npm install --save mobx

주의
React에서 온전하게 사용하려면 mobx와 함께 mobx-react-lite 또는 mobx-react를 설치해 주어야함

사용 방법

1) store 만들기

src/counterStore.js

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

export default class counterStore {
  count = 0; // state 초기 값

  constructor() {
    // makeObservable을 이용해서 각 객체에 대해 주석을 작성
    makeObservable(this, {
      count: observable,
      isNegative: computed,
      increase: action,
      decrease: action,
    });
  }

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

  increase() {
    this.count++;
  }
  decrease() {
    this.count--;
  }
}

2) 인스턴스 생성하고 Props 내려주기

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import counterStore from "./counterStore";

const store = new counterStore(); // 인스턴스 생성

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3) 사용자 인터페이스 구축 및 state 구독 설정

src/App.js

import "./App.css";
import { observer } from "mobx-react";

function App({ myCounter }) {

  return (
    <div style={{ textAlign: "center", padding: 16 }}>
      카운트 : {myCounter.count}
      <br />
      <br />
      마이너스 ?: {myCounter.isNegative}
      <br />
      <br />
      <button onClick={()=> myCounter.increase()}>+</button>
      <button onClick={()=> myCounter.decrease()}>-</button>
    </div>
  );
}

export default observer(App); // observer로 감싸서 구독 해주지 않으면 state가 변경되어도 리랜더링 되지 않음

간단하게 Mobx를 사용하여 counter app을 만들어 보았습니다.

확실히 redux보다 코드도 짧고 간결한 인상입니다. 예제 코드를 따라 치면서도 “에, 이게 다야?” 라고 할 정도였습니다. redux보다 더 매력적으로 느껴지는 상태 관리 라이브러리입니다.