MobX

Redux ★ 32282   VS   9893 ★ MobX

2017.07

MobX 주요 특징

• 데코레이터를 적극 활용한다.
  • experimentalDecorators 를 true 로 설정.
  • 스토어 객체에 붙이는 데코레이터가 있고, => @observable
  • 컴포넌트에서 사용하는 데코레이터가 있다. => @observer
• TypeScript 가 Base 인 라이브러리이다.
  • 당연히 @types/mobx, @types/mobx-react 는 필요가 없음.
• Redux 와 마찬가지로, 스토어에 필요한 부분과 리액트에 필요한 부분이 있다.
  • yarn add mobx
  • yarn add mobx-react
• 리덕스와 다르게 단일 스토어를 강제하진 않는다.
  • DI 없는 Angular Service ???
• ​처음 사용이 무척 쉽다.

MobX

후다닥 만들어 보기 단계 - 나이 먹는 앱

• step.1 state 객체를 정한다. => 리액트의 state 가 아니다.
  • 그냥 객체거나, 프리미티브 값일수도 있다.
• step.2 정한 state 객체에 @observable 데코레이터를 붙인다.
• step.3 state 값을 다루는 함수들을 만든다.
  • get / set 함수
  • 혹은 액션과 같은 역할을 하는 함수
  • 이뮤터블이 아니다 ! => 뮤테이트 하는것이다 !
• step.4 state 값에 변경되면 반응하는 컴포넌트를 만든다.
  • 그리고 그 컴포넌트에 @observer 데코레이터를 붙인다.
• step.5 컴포넌트에서 state 값을 사용한다.
• step.6 컴포넌트에서 state 값을 변경하는 함수를 사용한다.

step 1 ~ 3

import {observable} from 'mobx';

export class AgeState {
    @observable private _age = 35;
    constructor(age: number) {
        this._age = age;
    }
    public getAge(): number {
        return this._age;
    }
    public setAge(age: number): void {
        this._age = age;
    }
    public addAge(): void {
        this._age = this._age + 1;
    }
}

step 4 ~ 6

import * as React from 'react';
import './App.css';
import {AgeState} from './AgeState';
import {observer} from 'mobx-react';

const logo = require('./logo.svg');

const ageState = new AgeState(35);

@observer class App extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);

    this.addAge = this.addAge.bind(this);
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          {ageState.getAge()}
          <button onClick={() => this.addAge()}>한해가 지났다.</button>
        </p>
      </div>
    );
  }
  addAge() {
    const age = ageState.getAge();
    ageState.setAge(age + 1);
    // ageState.addAge();
  }
}

export default App;

https://github.com/2woongjae/mobx-ts-basic

• mobx 에서 말하는 state 는 리액트 컴포넌트의 state 와 다른 것
• (리덕스보다) 쉽지 않습니까 ?
  • 리액티브 프로그래밍 > 함수형 프로그래밍
  • 간편한 비동기 처리 => 넘나 쉬워요
• 데코레이터의 적극적인 사용으로 인해, 깔끔한 구성
• 하지만,
  • 단일 스토어가 아니다.
    • 스토어를 어떻게 사용지에 대한 적합한 해결을 모색해야 할 것
    • 결국 최상위 스토어를 만들고, props 로 공유해가는 방식으로
    • https://github.com/gothinkster/react-mobx-realworld-example-app
  • 라이프사이클에 대한 고민

mobx-react-devtools

mobx-react-devtools

• 이것은 컴포넌트입니다.
• yarn add mobx-react-devtools -D
• import DevTools from 'mobx-react-devtools';
• <DevTools />
• https://github.com/mobxjs/mobx-react-devtools

mobx-react-devtools

@observable (by mobx)

observable 사용법 - 2가지 방식

• observable(<value>)
  • 데코레이터 없이 사용하는 방식
  • @ 없이, 함수처럼 사용해서 리턴한 객체를 사용
• @observable <클래스의 프로퍼티>
  • 데코레이터로 사용하는 법
  • 클래스 내부에 프로퍼티 앞에 붙여서 사용
  • 한 클래스 안에 여러개의 @observable 존재
  • 타입스크립트는 이 방식으로 하는게 당연하겠죠!

observable 사용법 - 2가지 방식

import { observable } from 'mobx';

const list = observable([1, 2, 4]);

const isLogin = observable(true);

const age = observable({
    age: 35
});

class AgeState {
    @observable
    private _age = 35;
}

const ageState = new AgeState();

@observer (by mobx-react)

observer 사용법 - 2가지 방식

• observer(<컴포넌트>);
  • 데코레이터 없이 사용하는 방식
  • SFC 에 붙여서 사용
  • 어차피 리액트의 state 를 사용하지 않으면 SFC 로 해도 관계가 없다.
• <컴포넌트 클래스> 에 @observer 달아서 처리
  • 리액트의 라이프사이클이 아니라, mobx 의 라이프 사이클
    • componentWillReact
    • componentWillUpdate
    • componentDidUpdate

observer 사용법 - 2가지 방식

const StatelessApp = observer(() => {
  function addAge(): void {
    ageState.addAge();
  }
  return (
    <div>
      {ageState.getAge()}
      <button onClick={() => addAge()}>한해가 지났다.</button>
    </div>
  );
});

@observer
class App extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.addAge = this.addAge.bind(this);
  }
  render() {
    return (
      <div>
        {ageState.getAge()}
        <button onClick={() => this.addAge()}>한해가 지났다.</button>
      </div>
    );
  }
  addAge() {
    ageState.addAge();
  }
}

@computed  (by mobx)

computed 란 ?

• getter 에만 붙일수 있다. (setter 부르면 getter 도 실행된다.)
• 함수가 아니라 리액티브 하다는 것에 주목
• 실제 컴포넌트에서 사용하는 (게터)값들에 달아서 사용하면 최소 범위로 변경할 수 있기 때문에 유용하다.
  • 40살이 넘었을때만 나이를 올리면 40살 이하일때는 재랜더링 대상이 아닌 것과 같은 경우
  • 내부적으로 고도의 최적화 => 어떻게 ?
    • 매번 재계산을 하지 않는다
    • 계산에 사용할 observable 값이 변경되지 않으면 재실행하지 않음.
    • 다른 computed 또는 reaction 에 의해 호출되지 않으면 재실행하지 않음.
    • observable 과 처리 방식의 차이로 인한 성능 이슈에 주목
      • observable 이 변했는데 computed 가 변하지 않을때 사용에 따른 차이

computed 사용법 - 2가지 방식

• computed(<함수>);
  • 데코레이터 없이 사용하는 방식
  • 별 의미가 없다.
• <클래스의 getter 메서드> 에 @computed 달아서 처리

computed 사용법 - 2가지 방식

class AgeState {
    constructor() {
        extendObservable(this, {
            _age: 35,
            age: computed(function() {
                return (this._age > 40) ? this._age : 0;
            })
        })
    }
}

class AgeState {
    @observable private _age: number = 35;
    @computed
    get age(): number {
        return (this._age > 40) ? this._age : 0;
    }
}

@action  (by mobx)

action - MobX 2.2

• <action> wraps your original function automatically in a transaction. This means that the out-of-the-box performance of MobX will be even better.
• <actions> integrate very well with the mobx-react-devtools. This means that you can trace any mutation back to the causing action with the devtools or debugger.
• <actions> are always untracked. Which means that you cannot turn them into reactions accidentally by calling them from a reaction. While most people won’t run into this issue,
  • action makes the distinction between actions (something that modifies the state) and reactions (the state needs to trigger a side effect automatically) very clear.
• there is strict mode. <Actions> are an opt-in concept. You may use an action to clearly express the intent of your code, getting transactions for free; but you are in no way obliged to do so. All existing code will continue working as is. Unless strict mode is enabled using ‘useStrict(true)’.
  • In strict mode, MobX will throw an exception on any attempt to modify state outside an action.

action 이란 ?

• state 를 수정하는 함수
  • 어디에 state 를 수정하는 함수가 있는지 마킹
  • untracked, transaction 및 allowStateChanges로 래핑 한 후 리턴
• 평소엔 옵셔널
  • useStrict 모드를 쓰면 필수
  • useStrict 모드에서 observable 을 변경하는 함수가, action 을 마킹하지 않으면 런타임 에러
• computed 의 setter 는 액션이다.

useStrict(true);

action 사용법

ref.child('todos').on('value', action((snapshot: firebase.database.DataSnapshot) => {
  if (snapshot) {
    const list = snapshot.val();
    const todos = [];
    if (list !== null) {
      for (const key of Object.keys(list)) {
        todos.push({
          id: key,
          text: list[key]
        });
      }
    }
    this.todos = todos;
  }
}));

@action addTodo = (text: string) => {
  const ref = db.ref();
  ref.child('todos').push().set(text);
}

@inject 와 Provider

Provider

• 네, 그 프로바이더가 맞습니다.
  • 네, 그래서 컨테이너라는 개념을 사용해도 좋습니다.
• 프로바이더에 props 로 넣고, @inject 로 꺼내 쓴다고 생각하시면 됩니다.
  • 상당히 명시적이고, 편합니다.
  • 컨테이너를 쓰지 않아도 될것 같습니다.
    • props 로 바꿔줍니다.
    • this.props.store as IAgeState; => 중요한 부분

사용법

ReactDOM.render(
  <Provider store={ageState}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

@inject('store')
@observer
class App extends React.Component<{ store?: IAgeState; }, {}> {
  render() {
    const store = this.props.store as IAgeState;
    return (
      <div className="App">
        <DevTools />
        <p className="App-intro">
          {store.age}
          <button onClick={() => store.addAge()}>한해가 지났다.</button>
          <button onClick={() => store.addAgeAsync()}>깃헙 비동기 호출</button>
        </p>
      </div>
    );
  }
}

간단 todoApp

todoApp 만들기 (1)

• create-react-app mobx-ts-todo --scripts-version=react-scripts-ts
• 폴더 만들기
  • stores, components
• 스토어 만들기
  • yarn add mobx
  • experimentalDecorators 설정
  • todoStore.tsx 만들기 => export default new TodoStore();
• 프로바이더 설정
  • yarn add mobx-react
  • <App /> 감싸기

todoStore.tsx 최초

import { observable } from 'mobx';

export class TodoStore {
  @observable todos = [];
}

export default new TodoStore();

index.tsx 에 Provider 추가

import {Provider} from 'mobx-react';
import todoStore from './stores/todoStore';

ReactDOM.render(
  <Provider todoStore={todoStore} >
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

todoApp 만들기 (2)

• TodoInput 컴포넌트 만들기
  • input 태그에 ref 사용.
  • addTodo(text: string): void;
• TodoList 컴포넌트 만들기
  • todos: { id: string; text: string; }[];
  • deleteTodo(id: string): void;

TodoInput.tsx - dumb

import * as React from 'react';
import { observer } from 'mobx-react';

interface TodoInputProps {
    addTodo(text: string): void;
}

@observer
class TodoInput extends React.Component<TodoInputProps, {}> {
  private _input: HTMLInputElement;
  render() {
    return (
      <div>
        <input type="text" ref={ref => this._input = ref as HTMLInputElement} />
        <button onClick={() => this._addTodo()}>저장</button>
      </div>
    );
  }
  _addTodo = () => {
    const input = this._input;
    if (input.value !== '') {
        this.props.addTodo(input.value);
        input.value = '';
    }
  }
}

export default TodoInput;

TodoList.tsx - dumb

import * as React from 'react';
import { observer } from 'mobx-react';

interface TodoListProps {
    todos: { id: string; text: string; }[];
    deleteTodo(id: string): void;
}

@observer
class TodoInput extends React.Component<TodoListProps, {}> {
  render() {
    const list = this.props.todos.map(todo => (
        <li key={todo.id}>
            {todo.text}
            <button onClick={() => this.props.deleteTodo(todo.id)}>삭제</button>
        </li>
    ));
    return (
      <div>
        <ul>{list}</ul>
      </div>
    );
  }
}

export default TodoInput;

todoApp 만들기 (3)

• Firebase 연결 및 설정
  • 보안 규칙 설정
  • yarn add firebase (not @types/firebase)
• todoStore 작성
  • firebase 연결부
  • 리액트 컴포넌트에서 사용하는 action 작성
  • firebase 가 적용되는 포인트에 action 처리
    • 트랜잭션
• useStrict(true); 처리

파이어베이스 디비 보안규칙 변경

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

todoStore.tsx

import { observable, action } from 'mobx';
import * as firebase from 'firebase';

const config = {
    apiKey: 'AIzaSyD4Ywl6RRaFrSy8ZXL10hsSl6orA2PF5hc',
    authDomain: 'mobx-ts-todo.firebaseapp.com',
    databaseURL: 'https://mobx-ts-todo.firebaseio.com',
    projectId: 'mobx-ts-todo',
    storageBucket: 'mobx-ts-todo.appspot.com',
    messagingSenderId: '900175359555'
};
firebase.initializeApp(config);
const db: firebase.database.Database = firebase.database();

export class TodoStore {
  @observable todos: { id: string; text: string; }[] = [];
  constructor() {
    const ref = db.ref();
    ref.child('todos').on('value', action((snapshot: firebase.database.DataSnapshot) => {
      if (snapshot) {
        const list = snapshot.val();
        const todos = [];
        if (list !== null) {
          for (const key of Object.keys(list)) {
            todos.push({
              id: key,
              text: list[key]
            });
          }
        }
        this.todos = todos;
      }
    }));
  }
  @action addTodo = (text: string) => {
    const ref = db.ref();
    ref.child('todos').push().set(text);
  }
  @action deleteTodo = (id: string) => {
    const ref = db.ref();
    ref.child('todos').child(id).remove();
  }
}

export default new TodoStore();

todoApp 만들기 (4)

• https://github.com/2woongjae/mobx-ts-todo