MobX는 React 애플리케이션에서 상태 관리를 위해 사용되는 라이브러리입니다. 이를 통해 간단하고 효과적으로 컴포넌트 간의 통신을 수행할 수 있습니다.
MobX 설치
MobX를 사용하기 위해서는 먼저 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 MobX를 설치합니다.
npm install mobx mobx-react
MobX 스토어 생성
MobX 스토어는 애플리케이션의 전역 상태를 관리하는 역할을 합니다. 다음은 MobX 스토어를 생성하는 예제입니다.
import { observable, action, makeObservable } from "mobx";
class CounterStore {
@observable count = 0;
constructor() {
makeObservable(this);
}
@action increaseCount() {
this.count++;
}
@action decreaseCount() {
this.count--;
}
}
export default new CounterStore();
위 코드에서는 @observable 데코레이터로 count 속성을 감시하고, @action 데코레이터로 increaseCount와 decreaseCount 메서드를 액션으로 지정하고 있습니다.
컴포넌트에서 MobX 스토어 사용
MobX 스토어를 사용하기 위해서는 컴포넌트에서 MobX 스토어를 참조해야 합니다. 다음은 컴포넌트에서 MobX 스토어를 사용하는 예제입니다.
import React from "react";
import { observer } from "mobx-react";
import counterStore from "./CounterStore";
const CounterComponent = observer(() => {
const { count, increaseCount, decreaseCount } = counterStore;
return (
<div>
<button onClick={increaseCount}>Increase</button>
<span>{count}</span>
<button onClick={decreaseCount}>Decrease</button>
</div>
);
});
export default CounterComponent;
위 코드에서는 observer 함수를 통해 컴포넌트를 감싸 주어 MobX 스토어의 상태 변화를 감지하도록 설정하고 있습니다. 그리고 counterStore에서 필요한 count, increaseCount, decreaseCount 속성을 참조하여 사용하고 있습니다.
컴포넌트 간의 통신
MobX를 사용하면 컴포넌트 간의 데이터를 효과적으로 공유할 수 있습니다. 예를 들어, 하나의 컴포넌트에서 상태를 변경하면 다른 컴포넌트에서도 해당 상태를 업데이트할 수 있습니다.
import React from "react";
import { observer } from "mobx-react";
import counterStore from "./CounterStore";
const CounterComponent = observer(() => {
const { count, increaseCount, decreaseCount } = counterStore;
const handleClick = () => {
increaseCount();
// 다른 컴포넌트로 데이터 전달
};
return (
<div>
<button onClick={handleClick}>Increase</button>
<span>{count}</span>
<button onClick={decreaseCount}>Decrease</button>
</div>
);
});
export default CounterComponent;
위 코드에서는 handleClick 함수에서 increaseCount 메서드를 호출한 후에 다른 컴포넌트로 데이터를 전달할 수 있습니다.
이처럼 MobX를 사용하여 컴포넌트 간의 통신을 간편하게 처리할 수 있습니다. MobX는 상태 관리를 통해 애플리케이션의 퍼포먼스를 개선하는 데 도움을 주므로 React 개발을 할 때 고려해 볼 수 있습니다.