[컴] mobx + reactjs 사용

 redux mobx

 

mobx + reactjs 사용

사용

설치

• Installation · MobX
• npm install --save mobx

MobX 6 부터는 javascript 와의 호환성을 위해 decorator들을(@observable 등) 없앴다고 한다.

React 에서 사용하기

• React integration · MobX
• React class bindings for MobX
• React integration · MobX > tips
  • mobx-react-lite 에는 class 를 observer 로 만드는 기능이 빠져있다.

예제

• observer 는 observable 을 바라보고 있다가 observable 이 변하면 반영을 하게 된다.

import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

class Timer {
  secondsPassed = 0;
  sm = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increaseTimer() {
    this.secondsPassed += 1;
    this.sm += 2;
  }
}

const myTimer = new Timer();

setInterval(() => {
  myTimer.increaseTimer();
}, 1000);


// A function component wrapped with `observer` will reacts to any
// future change in an observable it used before

// functional version
//
// const TimerView = observer(
//   ({ timer }: { timer: Timer }) => (
//   <div>
//     <span>Seconds passed: {timer.secondsPassed}</span>
//     <span>Seconds passed: {timer.sm}</span>
//   </div>
// ));

type TimerViewProp = {
  timer: any
}

const TimerView = observer(
  class TimerView extends React.Component<TimerViewProp> {
    render() {
      const { timer } = this.props
      return (
        <div>
          <span>Seconds passed: {timer.secondsPassed} </span>
          <span>Seconds passed: {timer.sm} </span>
        </div>

      )
    }
  }
)

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

redux 대비 mobx 의 장점

1. 반복되는 code 가 적다. redux 는 reducer, actions, containers, components 를 계속해서 만들어야 한다.
   • 그래서 build time 이 줄어든다.
2. 배우기 쉽다.(learning curve 가 낮다.)
   

Mobx의 state 은 mutable 이다. Redux 가 함수들이 pure function 일때 scale 하기가 용이하다.

vs Redux

특정 test 에서 mobx 가 redux 보다 더 빠르다고 나온다.

• MW on Twitter: "Benchmarked Immutables against Observables in TodoMVC. More details at @ReactAmsterdam conf! #reactjs #redux #mobxjs https://t.co/tL536DWR6f" / Twitter

See Also

1. Optimizing React component rendering · MobX
2. Defining data stores · MobX

Reference

1. Choosing MobX over Redux for large-scale Enterprise Applications - DEV