#3 mobX

mobX는 상태관리 라이브러리 이다.
redux보다 깔끔하여 러닝커브가 낮다.
컴포넌트를 필요시에만 실행해 렌더링 최적화에 용이하다.

작동원리

event가 발생하면 Actions를 일으킨다.
Actions는 Observable state에 저장되어 있는 데이터들을 변화시키는 action함수이다.
Observable State는 상태들의 집합이다.
Observable State가 변화되면 Compute Values에서 감지하여 Side Effects를 전달하여 렌더링을 한다.
실행된 side Effects는 다시 액션함수에 이벤트를 전달한다.

사용법

1. import 해 준다.

import { observable } from 'mobx';

2. action함수들을 만들어준다.

import { observable } from 'mobx';

const myStore = observable({
	name : 'sh',
    
    changeName(txt){
    	this.name = txt;
    }
    
)};

export default MyStore;

2. 관리를 위해 만들어진 observable파일들을 묶어 export시켜준다.

3. 적용하고자 하는 컴포넌트에서 사용한다.

import * as React from 'react';
import { useObserver } from 'mobx-react';
import indexStore from './modules/indexStore';

const App = () => {
    const { myStore }  = indexStore();

    const changeName = (txt) => {
        numberStore.increaseAction(txt);
    }
    return useObserver(() => (
        <div>
            <p>{myStore.name}</p>
            <input type="text" value={myStore.name} onChange={changeName}></input>
        </div>
    ))
}

export default App;