MobX는 React 애플리케이션의 상태 관리를 간편하게 해주는 JavaScript 라이브러리입니다. 이 글에서는 MobX를 활용하여 React 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

MobX 소개

MobX는 함수형 프로그래밍과 관찰 가능한 데이터를 활용하여 상태 관리를 수행하는 라이브러리입니다. MobX는 데이터의 변화를 자동으로 감지하고, 이에 따라 UI를 업데이트합니다. 이로 인해 UI와 상태 사이의 관리가 훨씬 간편해집니다.

MobX 설치하기

먼저, MobX를 설치해야 합니다. 아래의 명령어를 사용하여 MobX와 관련된 라이브러리들을 설치합니다.

npm install mobx mobx-react

상태 관리하기

MobX를 사용하여 React 애플리케이션의 상태를 관리하는 방법은 간단합니다. 상태를 관리하기 원하는 클래스에 @observable decorator를 붙여주면 됩니다. 예를 들어, 다음과 같이 UserStore 클래스를 생성하고 @observable decorator를 이용해 상태를 관리할 수 있습니다.

import { observable } from 'mobx';

class UserStore {
  @observable
  name = 'John Doe';
  
  @observable
  age = 25;
}

위의 코드에서 name과 age는 @observable decorator를 통해 관찰 가능한 속성으로 설정되었습니다.

상태 사용하기

상태를 사용하는 방법은 간단합니다. @observer decorator를 사용하여 React 컴포넌트를 감싸주면, 해당 컴포넌트는 상태의 변화를 자동으로 감지하고 UI를 업데이트합니다. 예를 들어, 위에서 만든 UserStore를 사용하는 UserComponent를 만들어 보겠습니다.

import { observer } from 'mobx-react';

@observer
class UserComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.userStore.name}</h1>
        <p>Age: {this.props.userStore.age}</p>
      </div>
    );
  }
}

위의 코드에서 @observer decorator가 UserComponent 클래스를 감싸주고 있습니다. 이로 인해 UserComponent는 UserStore의 상태를 관찰하게 되며, 해당 상태가 변경되면 자동으로 UI를 업데이트합니다.

액션 사용하기

MobX에서는 @action decorator를 사용하여 상태를 변경하는 메서드를 정의할 수 있습니다. 예를 들어, UserStore에서 이름과 나이를 변경하는 메서드를 추가해 보겠습니다.

import { observable, action } from 'mobx';

class UserStore {
  @observable
  name = 'John Doe';
  
  @observable
  age = 25;
  
  @action
  setName(name) {
    this.name = name;
  }
  
  @action
  setAge(age) {
    this.age = age;
  }
}

위의 코드에서 setName과 setAge 메서드는 @action decorator를 통해 상태를 변경하는 메서드로 설정되었습니다. 이렇게 설정된 메서드는 MobX에 의해 상태의 변화를 감지하고 UI를 업데이트합니다.

결론

MobX를 사용하면 React 애플리케이션의 상태 관리를 간편하게 할 수 있습니다. @observable, @action, 그리고 @observer decorator를 활용하여 상태를 관리하고, UI를 업데이트할 수 있습니다. MobX의 간결하고 직관적인 API를 통해 개발자는 React 애플리케이션을 더 쉽게 개발할 수 있습니다.

해시태그: #MobX #React