[FE] hello-mobx

1. 프로젝트 초기화

npm init

2. 설치 개발 환경 의존

npm install --save-dev \
babel-core \
babel-loader \
babel-preset-es2015 \
babel-preset-stage-0 \
babel-plugin-transform-decorators-legacy

3. 설치 모듈 의존성

npm install --save mobx

4. 신규 ./.babelrc 및 ./webpack.config.js 두 파일
(1).babelrc

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
}

(2)webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

5. 예
(1) 디렉토리 구조

+ dist    //       
+ node_modules    //       
.babelrc
index.html
index.js
package-lock.json    //       
package.json
webpack.config.js

(2)index.js

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

class Store {
    @observable n = 0;

    @action inc() {
        this.n++;
    }

    @computed get result() {
        return this.n * 2;
    }
};

const store = new Store();

setInterval(() => {
    store.inc();
}, 1000);

autorun(() => {
    console.log(store.result);    //0 2 4 6 8 ...
});

주: (1)@observable는 속성 장식기로서 mobx는 대상의 속성 값의 변경을 감시하는 데 사용된다.(2)@action는 뒤의 함수가observable의 변경을 초래할 수 있음을 가리키는 데 사용되며@action 장식기는 생략할 수 있다.(3)@computed는 기존의 상태에 따라 계산된 일부 값이다. 예를 들어 본 예store에서는 상태n만 있고 result는 n에 따라 계산된 것이다.(4)autorun는 자동으로 리셋 함수를 터치합니다. 리셋 함수는 한 번 호출한 다음에 store의 상태가 바뀔 때마다 다시 터치합니다.
참고 자료
MobX TC39 Stage 2: Class and Property Decorators 효율적인 MobX