[MGS 3기 - 36일차] MobX

박철연·2022년 6월 3일

MGS 개발 일지 메가바이트 스쿨

MGS STFE 3기

목록 보기

33/35

저번 주와 이번주에 걸쳐서 상태 관리 라이브러리들을 알아보았습니다. 다만 Redux와 Context API 위주로 실습을 진행했기 때문에, 자체적으로 MobX의 개념과 사용법에 대해 따라 살펴보았습니다.

MobX 소개

MobX의 특징

상태 관리 라이브러리의 개념에 대해서는 이미 앞선 정리글에서 다뤄 보았습니다. 따라서 이번 글에서는 MobX 자체의 특징에 집중해서 학습 내용을 요약하려고 합니다.

React에 종속 되지 않음

Redux와 마찬가지로 React에 종속되는 라이브러리가 아닙니다. 따라서 바닐라 자바스크립트로 구성한 프로젝트에서도 사용 가능합니다.

다만, 상태를 가지고 프로그래밍을 하는 데 있어서는 사실상 React가 핵심적이기 때문에 실무에서는 대부분의 경우 React와 같이 사용되는 것이 사실입니다.

Redux와 다르게 store에 제한이 없음

Redux는 하나의 store만을 사용할 수 있다는 특징을 가집니다. 하지만 MobX는 두 개 이상의 store를 가질 수 있습니다.

다만 single store를 사용할 지 multiple store를 사용할 지는 프로젝트 성격에 따라 결정하여야 합니다.

ES6 문법을 지원

MobX는 ES6 문법을 지향하기 때문에 모던 자바스크립트 기반의 프로젝트를 구성할 때 좋은 선택지가 될 수 있습니다.

특히, async 문법까지도 지원하기 때문에 비동기 처리를 위해 외부 라이브러리를 가져와야 하는 Redux에 비해 비동기 코드를 작성하는 것이 더욱 자유롭습니다.

MobX의 개념

MobX의 기본 동작방식은 위의 이미지와 같습니다.

상태를 변경하기 위해서 event와 같은 action(행동)이 발생하면 상태(Observable)가 update되고, 상태가 변경되었음을 알려서 필요에 따라 연산된 값(Compute Values)을 계산하거나 적절한 reaction(반응)을 수행합니다.

Observable State

MobX 를 사용한 상태관리 데이터는 Observable, 즉 관찰되어지는 상태입니다.

이러한 관찰하고 있는 상태가 변경되었을 때 아래에서 설명할 특정 작업을 수행할 수 있습니다.

Reactions

Reactions는 Observable State의 값이 변경되었을 때 수행되는 작업입니다.

Observable State 의 내부의 값이 바뀔 때 마다 자동으로 특정 작업(Side Effect)을 수행하도록 Reactions을 정의하는 형식입니다.

Observable State의 값을 변경할 때는 action을 사용하도록 강제하고 있으며, MobX의 설계상 action을 사용하는 것이 권장됩니다.

Actions

Action(행동)은 Observable state에 변화를 일으키는 것입니다. React의 setter 함수와 비슷합니다.

Obeservable State의 값을 변경하는 상태 변경 함수를 이용해서 상태를 변경하고, 변경된 상태에 따라 자동으로 사이드 이펙트를 일으키는 것이 MobX의 핵심 동작이며 개념이라고 볼 수 있습니다.

기본적으로 action을 사용하지 않고, 상태를 변경하는 것을 MobX에서는 허용하지 않음으로써, 상태 변화을 일으키는(Side Effect) 부분과 구분합니다.

Computed Value

Computed Value(연산된 값)은 필요에 의해 특정 상태 값을 기반으로 자동으로 연산되어지는 값을 의미합니다.

즉, 특정 상태 값을 기반으로 Computed Value(연산된 값)를 자동으로 계산하여 사용할 수 있게 해주며, 연산에 사용된 특정 상태 값을 관찰하여 값이 변할 때 마다 자동으로 계산하여 사용할 수 있게 해줍니다.

MobX 사용법

MobX 설치

$ npm i mobx
$ npm i mobx-react

위 명령어를 통해 설치 가능합니다. 만약 React 기반의 프로젝트라면, mobx-react 라이브러리도 같이 설치해줘야 합니다.

추가로 mobx-react-lite라는 라이브러리도 있는데, 이는 오로지 hooks만 지원합니다. 따라서 경우에 따라서는 mobx-react-lite도 고려해봄직 합니다.

MobX 사용 예시

아래 예시는 MobX 공식 문서 페이지에서 가져온 예시입니다.

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()

// observable state를 사용하는 사용자 인터페이스를 구축합니다.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

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

// 매초마다 Seconds passed: X를 업데이트 합니다.
setInterval(() => {
    myTimer.increase()
}, 1000)