React & MobX 1. Counter 구현하기

React components 구조에 익숙해지고 나니 MobX에 대한 필요성을 느꼈다.

전에는 MobX를 다른사람 코드만 보고 따라해봤는데 이젠 목표를 정해서 익숙해지려고 한다.

처음 구현해볼 것은 아주 간단한 Counter이다.

Counter 구조

1. src > pages > Counter.jsx : component역할
2. src > stores > counter.js : store 역할
3. useStore.js : stores를 하나에 모아 useStore()로 제공

• counter.js : count하는 변수와 메소드를 관리할 수 있는 store 역할

import { observable } from 'mobx';
 

export const counter = observable({
    num: 0,
    increase() {
        this.num++;
    },
    decrease() {
        this.num = this.num - 1 < 0 ? 0 : this.num - 1;
        // num이 0이하로 내려갈 경우, 0으로 대체
    },
    reset() {
        this.num = 0;
    },
});

Redux를 공부할 때는 import할 게 참 많았는데 mobx는 observable만 있으면 언제 어디서든 상태를 관찰가능한 상태로 만들어준다.

대부분 방법을 찾아보면 class 형태로 하는데 decorator를 사용한다. 그런데 나는 아직 eject를 하기에는 부담이 있어서 object 형태로 구현했다.

• useStores.js : store가 여러개일 경우, useStore로 묶어서 api로 사용할 수 있다.

import { counter } from './stores/counter';

const useStore = () => {
    return { counter };
 //여러개일 경우, { counter, others ... }
};

export default useStore;

• Counter.jsx : Counter composition, state를 항상 관찰하기 위해, mobx-react의 useObserver를 사용해 return한다.

import React from 'react';
import { useObserver } from 'mobx-react';
import useStore from '../useStore';

const Counter = () => {
    const { counter } = useStore();

    const increase = () => {
        counter.increase();
    };
    const decrease = () => {
        counter.decrease();
    };

    return useObserver(() => (
        <div>
            <h1>{counter.num}</h1>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
        </div>
    ));
};

export default Counter;