[javascript] MobX와 리액트

04 Dec 2023

javascript

React는 현재 가장 인기 있는 자바스크립트 라이브러리 중 하나입니다. 그리고 MobX는 React와 함께 사용하기에 이상적인 상태 관리 라이브러리입니다. 이번 포스트에서는 MobX와 React를 함께 사용하는 방법에 대해 살펴보겠습니다.

MobX란?

MobX는 React에서 사용하기 쉬운 상태 관리 라이브러리입니다. MobX는 관찰 가능한 상태를 생성하고 이 상태가 변경될 때 자동으로 React 컴포넌트를 업데이트합니다. MobX를 사용하면 상태를 직접 변경하거나 업데이트하는 복잡한 로직을 작성할 필요가 없어집니다.

MobX 설치하기

먼저 MobX를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 MobX를 설치합니다.

npm install mobx mobx-react

MobX와 React 함께 사용하기

리액트 애플리케이션에서 MobX를 사용하기 위해 observer 데코레이터를 사용하여 관찰 가능한 상태를 생성합니다. observer 데코레이터는 MobX에서 제공하는 것으로, 상태가 변경될 때 해당 컴포넌트를 자동으로 업데이트합니다.

아래는 MobX와 React를 함께 사용하는 예제입니다.

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

@observer
class Counter extends React.Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <h1>Counter: {count}</h1>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    );
  }
}

export default Counter;

위의 예제에서 Counter 컴포넌트는 MobX의 observer 데코레이터로 감싸져 있습니다. 이렇게 함으로써 Counter 컴포넌트는 MobX에서 관찰 가능한 상태가 되며, 상태가 변경될 때 자동으로 업데이트됩니다.

MobX 상태 변경하기

MobX에서 상태를 변경하려면 observable 함수를 사용하여 관찰 가능한 상태 객체를 생성하고, action 함수를 사용하여 상태를 업데이트해야합니다.

import { observable, action } from "mobx";

class CounterStore {
  @observable count = 0;

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

  @action
  decrement() {
    this.count--;
  }
}

export default CounterStore;

위의 예제에서 CounterStore 클래스의 count 변수는 관찰 가능한 상태로 지정됩니다. increment와 decrement 메소드는 @action 데코레이터로 감싸져 있으며, 이는 MobX에서 제공하는 것으로 상태를 업데이트하는 메소드임을 나타냅니다.

MobX 사용하기

위에서 만든 CounterStore 클래스를 사용하여 MobX를 사용하는 컴포넌트에서 상태를 관리합니다.

import React, { Component } from "react";
import { observer } from "mobx-react";
import CounterStore from "./CounterStore";
import Counter from "./Counter";

const counterStore = new CounterStore();

@observer
class App extends Component {
  render() {
    return <Counter
      count={counterStore.count}
      increment={() => counterStore.increment()}
      decrement={() => counterStore.decrement()}
    />;
  }
}

export default App;

위의 예제에서 CounterStore 클래스의 인스턴스인 counterStore를 생성하고, Counter 컴포넌트에 상태와 상태를 업데이트하는 메소드를 전달합니다. @observer 데코레이터로 감싸진 App 컴포넌트는 MobX에서 제공하는 상태를 업데이트하는 기능을 이용하여 자동으로 업데이트됩니다.

이제 MobX와 React를 함께 사용하여 상태 관리를 손쉽게 할 수 있습니다. MobX를 사용하면 복잡한 상태 관리 로직을 구현하기 쉽고, React 컴포넌트의 업데이트도 자동으로 처리할 수 있습니다.

MobX란?

MobX 설치하기

MobX와 React 함께 사용하기

MobX 상태 변경하기

MobX 사용하기

참고 자료