상태관리, MobX 이해와 사용법

상태관리

• useState 대신 복잡한 구조의 상태 관리 가능

• 상태 관리 코드를 상태를 사용하는 컴포넌트와 분리해서 유지보수

• 미들웨어들을 통해 비동기 처리 및 상태 처리 가능

기존의 상태관리, Redux

최근 Redux-toolkit의 등장으로 위와 같은 불편함들이 일부 해소되긴 했습니다.

MobX!

MobX Core

• 상태 (state)
• 애플리케이션을 구동하는 데이터 (일반 객체, 배열, 클래스, 순환 데이터 구조 또는 참조)
• Class 를 통해 주로 제작 (OOP 🤓)
• 코드에 observable로 표시를 통해 MobX가 추적할 수 있도록 (중요!)

export class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
    });
  }
}

• 동작 (action)
• observable한 값을 변화 시키는 행동
• 코드에 action 표시를 통해 MobX가 트랜잭션을 자동으로 적용하여 성능을 쉽게 최적화

• 파생 (derivation)
• observable state의 변화로 인해 파생될 수 있는 모든 것이 derivation
• MobX는 다음과 같이 두 종류로 derivation을 구분합니다.
1. computed 값: 현재 observable state를 통해 파생(생성)될 수 있는 값JS getter 함수 get을 사용하여 속성을 정의하고 computed로 표시합니다.
2. reaction 값: observable state가 변경될 때 자동으로 발생해야 하는 부수효과
• 값을 반환하는 대신 콘솔 출력, 네트워크 요청, DOM 패치 적용을 위해 React 컴포넌트 트리를 업데이트하는 등의 부수효과

export class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increase: action,
      decrease: action,
      getCount: computed,
    });
  }

  get getDoubleCount() {
    return this.count * 2; // 현재 state가 변화하면 자동으로 값을 업데이트
  }

  increase = () => {
    this.count += 1;
  };

  decrease = () => {
    this.count -= 1;
  };
}

MobX Flow

MobX 예제

데코레이터를 v6 부터는 권장하지 않고 makeObservable, makeAutoObservable를 통해 지정함

1. Store 설정 / count.js

import { createContext, useContext } from 'react';
import { makeObservable, observable, action, computed } from 'mobx';

// class 사용
class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increase: action,
      decrease: action,
    });
  }

  increase = () => {
    this.count += 1;
  };

  decrease = () => {
    this.count -= 1;
  };
}

export const counterStore = new CounterStore(); // 레퍼런스 생성
const CounterStoreContext = createContext(counterStore);
// Context 사용을 위한 Hook
export const useCounterStore = () => useContext(CounterStoreContext);

2. Provider 설정 / App.js

import { Provider } from 'mobx-react';

const stores = {
  counterStore,
};

function App() {
  // Provider를 통해 store 전달
  return <Provider {...stores}>...</Provider>;
}

3. Context 사용 / Count.jsx

import { observer } from 'mobx-react';
import { useCounterStore } from 'store/count';

function Count() {
  // hook 형식으로 데이터 가져오기
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>Count</h1>
      <h2>{count}</h2>
      <button onClick={increase}>증가</button>
      <button onClick={decrease}>감소</button>
    </div>
  );
}

// observable state를 사용하는 컴포넌트는 observer 설정을 반드시 해줘야합니다.
export default observer(Count);

번외. 전역 스토어 접근 Hook 만들기 / useStore

import { useContext } from 'react';
import { MobXProviderContext } from 'mobx-react';

function useStore() {
  return useContext(MobXProviderContext);
}

export default useStore;

function Count() {
  const { counterStore } = useStore();

  return (
    ...
  );
}