23.01.06./mobx를 react 함수형 컴포넌트에서 적용해보기

1. 문제상황

mobx공식문서에 정보가 클래스형 컴포넌트로 있어 참고하기가 어려워 정리하기 위해 작성함

 

2. 간단하게 적용해보기

1) mobx 설치

npm install mobx mobx-react

2) numStore 만들기

import {observable} from "mobx"

const numStore = observable({
    num:0,
    increase(num){
        this.num = this.num + num
    },
    decrease(num){
        this.num = this.num - num
    }
})

export default numStore

3) store에 묶어주기

import listStore from "./listStore";

const Store = () => ({
    numStore,
})

export default Store;

4) 프로젝트에서 불러오기

import { useObserver } from "mobx-react"
import Store from "./store"

const Counter = () =>{

const {numStore} = Store();

    const onClickPlusBtn = () =>{
        numStore.increase(1)
    }

    const onClickMinusBtn = () => {
        numStore.decrease(1)
    }

    return useObserver(()=>
    (
        <div>
            <h1>{numStore.num}</h1>
            <button onClick={onClickPlusBtn}>+</button>
            <button onClick={onClickMinusBtn}>-</button>
        </div>
    ))
}


export default Counter