MobX를 사용한 컴포넌트 간 상태 전달 방법

17 Oct 2023

mobx

MobX는 React 애플리케이션에서 상태 관리를 간단하게 해주는 상태 관리 라이브러리입니다. 이를 사용하면 컴포넌트 간에 상태를 효율적으로 전달하고 관리할 수 있습니다.

MobX 개요

MobX는 상태 관리를 위한 반응형 프로그래밍 패러다임을 제공합니다. 이는 상태를 변수 또는 객체로 정의하고, 상태가 변경되면 자동으로 상태를 감지하고 알림을 받는 방식입니다.

MobX 사용 방법

다음은 MobX를 사용하여 컴포넌트 간에 상태를 전달하는 방법입니다:

MobX 설치: 먼저 프로젝트에 MobX를 설치해야 합니다. 이를 위해 npm 또는 yarn을 사용할 수 있습니다. 다음 명령어를 사용하여 MobX를 설치합니다.
```
npm install mobx mobx-react
```
또는
```
yarn add mobx mobx-react
```
상태 관리 클래스 생성: 상태를 관리하기 위해 MobX의 @observable 데코레이터를 사용하여 클래스 내부에 상태 변수를 생성합니다.
```
import { observable } from 'mobx';

class AppState {
  @observable count = 0;
}

export default new AppState();
```
위 예제에서는 count 변수를 생성하고, @observable 데코레이터를 사용하여 이 변수를 MobX에게 감시할 수 있음을 알립니다.

상태 사용: 컴포넌트에서 MobX의 @observer 데코레이터를 사용하여 상태 관리 클래스를 감시합니다. 이를 통해 상태가 변경될 때마다 컴포넌트가 자동으로 업데이트됩니다.

import React from 'react';
import { observer } from 'mobx-react';
import appState from './AppState';

@observer
class Counter extends React.Component {
  incrementCount() {
    appState.count++;
  }

  render() {
    return (
      <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

위 예제에서는 appState 변수를 가져와서 count 상태를 사용하고 있습니다. appState.count 값을 변경하면 해당 컴포넌트가 자동으로 업데이트됩니다.

상태 전달: 다른 컴포넌트에서 상태를 사용하려면, 상태 관리 클래스를 import하고 감시할 컴포넌트를 @observer 데코레이터로 감싸줍니다.
```
import React from 'react';
import { observer } from 'mobx-react';
import appState from './AppState';

@observer
class DisplayCount extends React.Component {
  render() {
    return <p>Count: {appState.count}</p>;
  }
}

export default DisplayCount;
```
위 예제에서는 appState.count 값을 보여주는 컴포넌트를 만들었습니다. 이 컴포넌트는 @observer 데코레이터로 감싸져 있으므로, count 값이 변경되면 자동으로 업데이트됩니다.

결론

MobX는 React 애플리케이션에서 컴포넌트 간에 상태를 전달하고 관리하는 데에 유용한 상태 관리 라이브러리입니다. MobX를 사용하면 간단하게 반응형 프로그래밍 패러다임을 활용하여 상태를 관리할 수 있습니다.

더 많은 MobX 사용 방법과 기능에 대해서는 MobX 공식 문서를 참고하시기 바랍니다.

#React #MobX