MobX

MobX

공식문서, 참고

MobX 한글 문서 https://ko.mobx.js.org/README.html

React에서 MobX 경험기 https://techblog.woowahan.com/2599/

소개

간단하고 확장 가능한 상태관리

철학

1. Straightforward (사용하기 쉽다)

   할당문을 통해 쉽게 state 를 변경

2. Effortless optimal rendering (랜더링 최적화하기 쉽다)

   상태와 상태를 사용하는 관계를 의존 트리 (dependency tree)로 만들고 상태에 따라 필요한 경우만 연산

   • selectors, memoization을 사용한 컴포넌트 최적화 작업이 필요없음

3. Architectural freedom (구조의 자유) UI 프레임워크 밖에서 애플리케이션의 상태를 관리

   • 코드 분리가 쉬움
   • 테스트가 쉬움

예제

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

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

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

setInterval(() => {
    myTimer.increase()
}, 1000)

Mobx의 데이터 흐름

장점

위에서 언급된 장점 제외

• 객체지향적인 구조, 로직과 View의 분리
  • Store: 비즈니스 로직 처리, 상태 관리
  • Model: 도메인 로직 처리
  • Repository: Ajax 요청 처리

단점

• 디버깅 툴의 부재

  • Redux DevTools

• 자유로운 구조

  • Store가 상태(state) 와 비즈니스 로직 을 함게 가지기 때문에 Store의 역할이 명확해야함
  • Store가 외부 Store를 참고하게 된다면 복잡한 구조를 띄게 됨