패스트캠퍼스 챌린지 14일차 (MobX)

22.2.6 (일) +14days

MobX

https://mobx.js.org/README.html

Simple, scalable state manage ment

A quick example

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Model the application state.
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

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

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

Installation

npm install mobx mobx-react

Ten minute introduction to MobX and React (MobX 학습시 읽어봐야 할 자료)

https://mobx.js.org/getting-started

MobX: Ten minute introduction to MobX and React

A simple todo store...

class TodoStore {
  todos = [];

  get completedTodosCount() {
    return this.todos.filter(
      todo => todo.completed === true
    ).length;
  }

  report() {
    if (this.todos.length === 0)
      return "<none>";
    const nextTodo = this.todos.find(todo => todo.completed === false);
    return `Next todo: "${nextTodo ? nextTodo.task : "<none>"}". ` +
      `Progress: ${this.completedTodosCount}/${this.todos.length}`;
  }

  addTodo(task) {
    this.todos.push({
      task: task,
      completed: false,
      assignee: null
    });
  }
}

const todoStore = new TodoStore();

The gist of MobX

MobX distinguishes between the following three concepts in your application:

1. State
2. Actions
3. Derivations

MobX core

강의에서는 MobX 코어 부분을 주로 다뤘다. 하지난 내용이 방대해서 텍스트로 애매하게 정리하기는 어려웠다. MobX를 실제 사용하게 될 때 이 부분은 다시 읽어봐야겠다.

MobX V6에서는 원래 알고 있었던 MobX를 어노테이션을 활용해 사용하는 방식과 사용 방법이 달라졌다. Observer를 사용하는 핵심 원리는 같겠지만 뭔가 복잡하게 느껴진다. MobX의 장점이 구버전의 Redux의 복잡함을 단순화 할 수 있다는 점이었는데 Redux Toolkit의 등장으로 MobX의 장점이 무엇인지 궁금해진다.

실제 상태관리 라이브러리를 사용하게 될 때 Redux Toolkit과 MobX를 한번 비교해 봐야겠다.

 

 

정리

Smple ⇒ No Boilerplate

Action ⇒ Derivative를 바꾸는 유일한 수단

Reactive Programming ⇒ Observable / Observer

with React ⇒ re-render issue (small component)

makeAutoObservable ⇒ makeObservable을 보다 쉽게

actions ⇒ runInAction / flow

Computed ⇒ getter pure

reaction ⇒ side effect

reactive ⇒ observable인 것이 바뀔 때

 

 

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다