[React] 함수형 컴포넌트에서 Mobx 사용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 함수형 컴포넌트에서 mobx 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Mobx란?

 

mobx는 react에서 상태 관리를 위해 사용되는 라이브러리입니다.

 

react에서 제일 많이 사용되는 상태 관리는 redux라는 것이 있는데 상태 관리와 redux에 대한 개념이 필요하신 분들은 여기를 참고해주시면 됩니다.

 

 

 

mobx의 공식문서를 참고해보면 mobx는 다음과 같은 구조로 되어 있다고 합니다.

 

mobx 아키텍처

 

 

• Actions → Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수
• Observable State → 관찰되고 있는 데이터 값들이 저장되어 있는 장소
• Compute Values → Observable State에 저장되어 있는 데이터가 변화되는 것을 알아채면 렌더링과 같은 Side Effects trigger를 전달
• Side Effects → 렌더링과 같은 Side Effects가 실행되고 실행된 Side Effects들은 다시 액션 함수가 실행되도록 이벤트 전달

 

위의 내용을 정말 간단하게 표현하면 액션 함수가 실행되어 state값들에 변화가 발생되면 렌더링 같은 side effects들이 실행되어 그에 따른 결과들이 화면이 보이게 되는 것입니다.

 

하지만 만약 액션 함수가 실행되어도 state값들에 변화를 주지 않는다면 더 이상 아무것도 진행되지 않게 됩니다.

 

 

 

mobx의 가장 큰 특징은 자바와 같이 객체지향적인 느낌으로 프로그래밍 한다는 것입니다.

 

그리고 redux에 비해 사용되는 방식이 간단하고 또한 복잡하지 않다는 특징을 가지고 있습니다.

 

왜 이런 생각들이 느껴지는지 기존에 제가 redux를 이용하여 포스팅 해놨던 [React] 함수형 컴포넌트에서 Redux 사용하기와 동일하게 실행되도록 mobx로 구현해보겠습니다.

 

 

반응형

 

 

Mobx 설정

 

[ 1. 패키지 설치 ]

 

$ npm install mobx mobx-react

 

 

 

[ 2. observable 파일 생성 ]

 

state값과 action함수가 담겨있는 observable 파일을 생성해보겠습니다.

 

위치는 /src/modules에 numberStore.jsx로 생성하겠습니다.

 

import { observable } from 'mobx';

const NumberStore = observable({
    // state
    num: 0,

    // action
    increaseAction(num) {
        this.num = this.num + num;
    },
    
    decreaseAction(num) {
        this.num = this.num - num;
    }
});

export default NumberStore;

 

 

 

[ 3. 사용되는 observable파일들을 묶어주는 파일 생성 ]

 

위치는 /src/modules에 indexStore.jsx로 생성하겠습니다.

 

import numberStore from './numberStore';

const indexStore = () => ({ 
    numberStore,
    // store1,
    // store2,
    // ...
});

export default indexStore;

 

 

 

[ 4. App.jsx에서 mobx 사용 ]

 

관찰되고 있는 대상을 가져다 사용하기 위해서는 사용되는 곳에 useObserver를 이용해주면 됩니다.

 

useObserver를 사용하지 않을 경우 제대로 동작되지 않게 됩니다.

 

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

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

    const onClickIncrease = () => {
        numberStore.increaseAction(3);
    }

    const onClickDecrease = () => {
        numberStore.decreaseAction(2);
    }

    return useObserver(() => (
        <div>
            <p>현재 값: {numberStore.num}</p>

            <button onClick={onClickIncrease}>증가</button>
            <button onClick={onClickDecrease}>감소</button>
        </div>
    ))
}

export default App;

 

 

728x90

 

 

위와 같이 설정을 모두 마친 뒤 실행시켜보면 현재 값, 증가버튼, 감소 버튼이 보이게 됩니다.

 

증가 버튼을 누를 경우 3만큼 증가되는 것과 감소 버튼을 누를 경우 2만큼 감소되는 게 실시간으로 화면에 보이게 됩니다.

 

 

실행 화면

 

 

 

 

redux와 mobx를 모두 구현해보신 분들은 redux에 비해  mobx가 매우 간단하게 구현되었다라는 것을 느끼실 수 있으실 겁니다.

 

저는 개인적으로 redux나 mobx나 모두 react에서 사용하기 좋은 상태관리들이라고 생각하기 때문에 둘 중 본인의 취향에 맞는 것을 택하여 사용하면 될 것 같습니다.

 

 

 

파일 구성

 

파일 구성

 

 

 

참조

 

 

[React] MobX 개요

 

공식문서

 

 

 

 

 

 

이상으로 함수형 컴포넌트에서 Mobx 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.