React + Mobx, Redux 대신에 Mobx로 상태 관리 편하게 해보실래요?

react의 대표 상태관리 모듈은 redux 에요

근데 이거 사용하기도 어렵고 비동기로 쓸라면 미들웨어 붙여야되고 가독성 떨어지고 개발자 입장에서 편하지가 않아요

 

그래서 react 상태관리 모듈로 mobx를 쓰려고 해요

홈페이지 참고하시면 정말 간편하게 사용할수 있어요 그대로 사용하시면되요

React 통합 · MobX

React 통합 · MobX

npm install mobx mobx-react-lite 두개 모듈을 설치하면 사용할수 있어요

mobx-react 이런것도 보이실텐데 이거는 class component에서 사용하는 모듈이고

mobx-react-lite는 functional compoent에서 사용하는 모듈이에요

v6에서 mobx-react에서 lite도 포함시켰는데 저는 class component를 안쓰기 때문에 mobx-react-lite를 설치했고

class component를 사용하거나 둘다 사용하시는 분들은 mobx-react를 설치하시면되요

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import { makeAutoObservable, runInAction } from "mobx";
import { observer } from 'mobx-react-lite';
import { createContext, useContext } from "react";

class Timer {
    secondsPassed = 0;
    constructor() {
        makeAutoObservable(this);
    }
    increaseTimer() {
        this.secondsPassed += 1;
    }
    async resetTimer() {
        await new Promise((resolve, _reject) => {
            setTimeout(() => {
                resolve();
            }, 1000);
        });

        runInAction(() => {
            this.secondsPassed = 0;
        });
    }
}

const myTimer = new Timer();
const TimerContext = createContext();

const TimerView = observer(() => {
    // Grab the timer from the context.
    const timer = useContext(TimerContext); // See the Timer definition above.
    useEffect(() => {
        let timeout = setInterval(() => {
            if (myTimer.secondsPassed > 4) {
                myTimer.resetTimer();
                clearInterval(timeout);
            } else {
                myTimer.increaseTimer();
            }
        }, 200);

        return () => {
            clearInterval(timeout);
        };
    }, []);

    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    );
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <TimerContext.Provider value={myTimer}>
        <TimerView />
    </TimerContext.Provider>
);

위에 예제코드는 홈페이지에 나온 가이드에 async, await을 사용한 비동기를 추가시킨거에요

 

store를 class로 작성할수 있어서 데이터가 한눈에 들어와요. 물론 object로 바로 만들수도 있어요

component에서 store를 사용하기 위해서는 observer 함수로 compnent를 변환해주면 끝이에요

위 예제는 자식 컴포넌트에서 같이 store 정보 사용할수 있게 context로 store를 붙였어요

 

store 생성은 일반 클래스 동일하게 만들면 되고 생성자에 makeAutoObservable(this); 이거 한줄만 추가시키면 

클래스에 선언된 변수와 함수에 대해서 observable 과  action을 자동으로 만들어줘요

그냥 클래스 선언하고 생성해서 사용하는 방법과 동일하다는거에요 redux보다 데이터 흐름이 훨씬 눈에 잘들어오죠?

 

주의할점은 비동기 함수에서 상태변화를 일으킬때(obsavable에 해당되는 변수를 변경)는 runInAction() 함수를 통해서 해야된다는거에요

 

아 그리고 store class 작성하실때 예제에는 arrow function 안썼는데 함수 내부에서 this를 쓰는경우는 왠만하면 arrow function 쓰는게 편해요

왜나면요 저희 obj.fn() 이런식으로 쓰는경우도 있지만 비구조화 할당 사용해서 let {fn} = obj; fn(); 이렇게도 많이 쓰잖아요

이렇게되면 this가 바인딩되지 않아서 동작이 안되요

 

local obsavable도 만들수 있고 사이트에 아주 쉽게 설명해놨는데 개인적으로 react hooks를 사용하는 편이 더 좋은거 같아요

useState, useEffect, useMemo, useCallback 이런것들 있잖아요

이런걸 잘 사용해서 custom hook으로 만들어서 사용하면 mobx를 굳이 사용할 필요성이 느껴지지 않아요