React mobX

출처 - 1

1. MobX?

• state의 변화를 보다 간편하게 할 수 있도록 지원하는 모듈

2. 사용 모듈

import { decorate, observable, action } from 'mobx';
import { observer } from 'mobx-react';

3. Decorator

• babel 설정

$ yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

• package.json 수정

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
  }

• decorator 사용

import React, { Component } from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';


@observer //옵저버 컴포넌트
class Counter extends Component {
  @observable number = 0;  //옵저버 대상 state

  @action //옵저버블 state에 대한 변경사항
  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>
    );
  }
}

export default Counter;

4. inject, 컴포넌트에 스토어 주입

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject('counter')
@observer
class Counter extends Component {
  render() {
    const { counter } = this.props;
    return (
      <div>
        <h1>{counter.number}</h1>
        <button onClick={counter.increase}>+1</button>
        <button onClick={counter.decrease}>-1</button>
      </div>
    );
  }
}

export default Counter;