MobX

이민기·2022년 7월 15일

MobX React mobx

MobX

Mobx란 상태관리를 도와주는 라이브러리로 Redux와 마찬가지로 mobx-react를 이용해 react에서도 사용가능하다.

🖊 MobX6에서는 데코레이터 문법( @ )의 사용을 권장하지 않는다고 한다.
↪ 자세한 내용은 MobX공식문서의 Enabling decorators파트에 나와있다.

특징

비동기 처리가 간편하다.
↪ MobX에서는 비동기 처리를 async/await을 이용해 간단하게 처리 가능하다.
redux와는 다르게 값을 직접 수정 및 변경 가능하다
↪ redux에서는 불변성을 지키며 작업을 해야했지만 MobX는 꼭 그래야 하는건 아니다!
객체지향 프로그래밍을 권장한다.

간단한 MobX 상태관리

MobX 6을 기준으로 작성되었으며, 따라서 @을 이용한 데코레이션 문법을 사용하지 않았으며 class를 이용하는 방식이 아닌 Hooks를 이용한 방식으로 작성되었다.

설치
npm i mobx mobx-react

기본 상태와 함수

// stores/AccountStore.js
import { observable, action } from "mobx";

const AccountStore = observable({
  // state 부분
  user: {
    id: 0,
    name: "Account 1",
  },

  // state를 변경하는 함수
  setUser: action((account) => {
    AccountStore.user = { ...account };
  }),
});

export default AccountStore;

observable을 이용해 기본 상태를 선언하며 action키워드를 이용해 상태를 변경하는 함수를 구현한다.

React의 createContext를 이용해 StoreProvider 생성

// stores/Context.js

import React from "react";
import AccountStore from "./AccountStore";

export const storeContext = React.createContext({
  AccountStore,
});

//store Provider 생성
export const StoreProvider = ({ children }) => {
  return <storeContext.Provider value={{ AccountStore }}>{children}</storeContext.Provider>;
};

export default StoreProvider;

Component에서 상태 값을 사용 할때

// pages/Main.js

import { useContext, useState } from "react";
import indexStore from "../stores/IndexStore";
import { observer, useLocalStore, useObserver } from "mobx-react";
import StoreProvider from "../stores/Context";
import AccountStore from "../stores/AccountStore";

 function Main() {
   //Store에서 상태를 가져오는 부분
  const {
    AccountStore: { user: state },
  } = indexStore();

  return (
    <div>
       <p>{state.name}</p>
    </div>
  );
}
//observer을 이용해 감싸주는 부분
export default observer(Main);

Component 함수를 observer를 이용해 감싸주지 않으면 상태가 변경되어도 리렌더링이 되지 않으니 주의해야한다!
↪상태가 변경되지 않는것은 아니나, 리렌더링이 되지 않아 화면에 변경된 값이 적용되지 않는다.

상태값을 변경하는 함수를 사용할 때

// comoponent/UserMenu.js

import indexStore from "../stores/IndexStore";
import AccountStore from "../stores/AccountStore";
import { autorun } from "mobx";

const accounts = [
  {
    id: 0,
    name: "Account 1",
  },
  {
    id: 1,
    name: "Account 2",
  },
  {
    id: 2,
    name: "Account 3",
  },
];

function UserMenu() {
  //Store에서 상태를 가져오는 부분
  const {
    AccountStore: { user: state },
  } = indexStore();

  return (
    <>
    {accounts.map((account, idx) => {
      return (
        <div
          onClick={() =>
          	 //Store에 있는 함수를 사용하는 부분
              AccountStore.setUser(accounts[account.id])
          }
          value={account.id}
          key={idx}
        >
            <p>{account.name} </p>
        </div>
      );
    })}
</>
  );
}
export default UserMenu

Provider를 이용해 App 감싸주기

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Reset } from "styled-reset";
import AccountStore from "./stores/AccountStore";
import { Provider } from "mobx-react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <Reset />
    <Provider AccountStore={{ AccountStore }}>
      <App />
    </Provider>
  </>
);