Mobx란 상태관리를 도와주는 라이브러리로 Redux와 마찬가지로 mobx-react를 이용해 react에서도 사용가능하다.
🖊 MobX6에서는 데코레이터 문법(
@
)의 사용을 권장하지 않는다고 한다.
↪ 자세한 내용은 MobX공식문서의Enabling decorators
파트에 나와있다.
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;
// 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;
// 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);
// 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
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>
</>
);
여기까지 간단하게 MobX를 알아보았는데, 아직까지 Redux를 사용한 프로젝트가 훨씬 많지만
MobX역시 Redux와는 다른 장단점을 가지고 있으니, 필요할 때 선택하여 사용하면 좋을 것 같다. 🥲