[React] #16. MobX 를 이용한 상태관리(병맛해설)

exoluse·2021년 11월 1일

React mobx

React

목록 보기

17/20

리덕스만 살짝 핥아본게 전부였는데...

몹X(MobX)라는 것으로도 리액트의 상태관리가 된다는 것을 보고 헐레벌떡 헬로월드를 찍으러 왔다. 근데 뭔지 한방에 이해가 되지 않는다. 머릿속으로 그림을 그려가며 포스팅해 보겠다.

준비물

1. create-react-app < project>

npx create-react-app mobx-test

2. mobx, mobx-react

일단 설치부터 하자.

cd mobx-test
npm install mobx mobx-react

MobX의 구동 요소

1. Action (관심병사 관리지침)

Observable State 에 저장되어 있는 액션 함수

2. Observable States (관심병사 분대)

관찰받고 있는 상태값이 저장된 저장소

3. Compute Values (관심병사 감시자)

관심병사가 자해(?)나 자살(?)을 하지 않기 위하여 감시하는 병사가 옆에 있어야 관심병사의 상태는 나날이 변경될 것이다.

import { observable } from 'mobx';

// 관심병사 분대는 관심병사와 관심병사 감시자(Observable), 관리지침이 같이 들어있다.
const 관심병사_분대 = observable({

    // 관심병사 갈굼
    갈굼횟수 : 0,

    // 관심병사 관리지침
    갈구기(){
        this.갈굼횟수++;
    },
    쓰다듬기(){
        this.갈굼횟수--;
    }
});

export default 관심병사_분대;

대충 이런식으로 이해하면 되겠다. 최대한 신병 여러분이 이해하기 쉽게 적어 보았다.

4. 관심병사 소대

import 관심병사_분대 from './관심병사_분대';

const 관심병사_소대 = () => ({
    관심병사_분대
    ...
    ...
});

export default 관심병사_소대;

5. 관심병사 관리

import 관심병사_소대 from "./관심병사_소대";
import { useObserver } from 'mobx-react';


function 관심병사_관리() {

    let { 관심병사_분대 } = 관심병사_중대();

    let 관심병사_갈구기 = () => {
        관심병사_분대.갈구기();
    };

    let 관심병사_쓰다듬기 = () => {
        관심병사_분대.쓰다듬기();
    };

    return useObserver( ()=>(
        <>
            <div>count : {관심병사_분대.갈굼횟수}</div>
            <div>
                <button onClick={ ()=>{
                    관심병사_갈구기();
                } }>+</button>
            <button onClick={ ()=>{
                    관심병사_쓰다듬기();
                } }>-</button>
            </div>
        </>
    ))
}

export default 관심병사_관리;