이번 포스트에서는 MobX를 사용하여 리액트 컴포넌트 간의 상호작용을 구현하는 방법을 알아보겠습니다.

MobX란?

MobX는 JavaScript 상태 관리 라이브러리로, 단방향 데이터 플로우와 함께 양방향 바인딩을 제공하여 애플리케이션의 상태 관리를 쉽게 할 수 있게 해줍니다. MobX는 간단하고 직관적인 API를 제공하여 개발자가 코드를 더욱 간결하고 유지 보수하기 쉽게 작성할 수 있게 도와줍니다.

MobX 설치

MobX를 사용하기 위해 우선 패키지를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치할 수 있습니다.

npm install mobx mobx-react

MobX 사용하기

MobX를 사용하기 위해 observable, action, computed 등의 데코레이터를 활용합니다. 이러한 데코레이터는 클래스 내에서 상태, 동작, 계산 등을 정의하는데 사용됩니다.

Observable 상태 생성하기

먼저, MobX의 observable 데코레이터를 사용하여 관찰 가능한 상태를 생성합니다. 이 상태는 컴포넌트에서 사용되는 데이터입니다. 다음은 예시입니다.

import { observable } from 'mobx';

class CounterStore {
  @observable
  count = 0;
}

const counterStore = new CounterStore();

위의 예제에서 count는 상태를 의미하며, observable 데코레이터가 적용되어 관찰 가능한 상태로 선언됩니다.

Action 메서드 정의하기

다음으로, MobX의 action 데코레이터를 사용하여 상태를 변경하는 메서드를 정의합니다. 이 메서드를 사용하여 상태를 갱신하고 동작을 수행할 수 있습니다. 예를 들어, 다음과 같이 increaseCount() 메서드를 정의할 수 있습니다.

import { action } from 'mobx';

class CounterStore {
  @observable
  count = 0;

  @action
  increaseCount() {
    this.count++;
  }
}

const counterStore = new CounterStore();

Computed 값 계산하기

마지막으로, MobX의 computed 데코레이터를 사용하여 계산된 값을 정의할 수 있습니다. 이는 다른 상태에 의존하는 값들을 쉽게 계산하고 캐싱할 수 있도록 합니다. 예를 들어, 다음은 doubledCount()라는 계산된 값을 정의하는 예시입니다.

import { computed } from 'mobx';

class CounterStore {
  @observable
  count = 0;

  @action
  increaseCount() {
    this.count++;
  }

  @computed
  get doubledCount() {
    return this.count * 2;
  }
}

const counterStore = new CounterStore();

위의 예제에서 doubledCount() 메서드는 count 상태에 의존하는 값으로, get 키워드를 사용하여 접근 가능한 계산된 값으로 정의되었습니다.

MobX 컴포넌트와의 상호작용

MobX로 생성된 상태 및 메서드를 활용하여 리액트 컴포넌트와 상호작용할 수 있습니다. 예를 들어, 다음은 MobX 상태를 활용하여 카운터 컴포넌트를 만드는 예시입니다.

import React from 'react';
import { observer } from 'mobx-react';

const Counter = observer(({ counterStore }) => {
  const handleIncrease = () => {
    counterStore.increaseCount();
  };

  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={handleIncrease}>Increase</button>
    </div>
  );
});

export default Counter;

위의 예제에서 observer 데코레이터는 MobX의 상태 변경 사항을 감지하여 리렌더링을 자동으로 처리합니다. counterStore는 MobX로 생성한 상태입니다.

위의 예시 코드를 App 컴포넌트에서 렌더링하면, 카운터 컴포넌트가 생성되고 상태 변경 및 동작 수행이 가능한 카운터 애플리케이션이 동작할 것입니다.

MobX를 사용하면 리액트 컴포넌트 간의 상호작용을 쉽게 구현할 수 있으며, 코드의 가독성과 유지 보수성도 높일 수 있습니다.

마무리

이번 포스트에서는 MobX를 사용하여 컴포넌트 상호작용을 구현하는 방법에 대해 알아보았습니다. MobX를 활용하면 리액트 애플리케이션을 보다 효율적으로 개발할 수 있으며, 코드의 가독성을 높일 수 있습니다.

더 많은 MobX의 기능과 상세한 사용 방법은 공식 문서를 참고하시기 바랍니다.

Happy coding! 🚀 #React #MobX