Redux에서 MobX로 전환하기 위한 가이드

17 Oct 2023

redux

Redux는 React 애플리케이션에서 상태 관리를 위한 인기 있는 라이브러리입니다. 그러나 MobX는 Redux보다 간단하면서도 강력한 상태 관리 솔루션으로 알려져 있습니다. Redux에서 MobX로 전환하는 것은 프로젝트의 상태 관리 체계를 개선하고 생산성을 향상시키는 데 도움이 될 수 있습니다. 이 가이드에서는 Redux에서 MobX로의 전환에 대한 주요 단계를 안내합니다.

1. MobX 설치

MobX를 사용하기 위해서는 먼저 npm 또는 yarn을 사용하여 MobX 패키지를 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

npm install mobx mobx-react

2. Redux 코드 이해하기

전환 과정에서 현재의 Redux 코드를 충분히 이해해야 합니다. Redux의 핵심 개념인 액션, 리듀서, 스토어 등을 확실히 숙지하고 있어야 합니다. Redux 코드의 구조와 작동 방식에 대한 이해는 MobX로의 전환을 더욱 수월하게 만들어 줄 것입니다.

3. MobX로 상태 관리 변경하기

MobX 스토어 생성

MobX는 Observable 상태를 손쉽게 관리할 수 있는 스토어를 제공합니다. Redux의 스토어와 유사한 역할을 합니다. MobX 스토어를 생성하고 필요한 액션들과 상태를 추가합니다.

import { observable, action } from 'mobx';

class MyStore {
  @observable count = 0;

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

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

const store = new MyStore();
export default store;

MobX Provider 설정

MobX의 상태를 사용하기 위해 React 컴포넌트에서 MobX Provider를 설정해야 합니다. 이제 Redux의 Provider 대신 MobX의 Provider를 사용할 것입니다.

import React from 'react';
import { Provider } from 'mobx-react';
import store from './store';

const App = () => {
  return (
    <Provider store={store}>
      <YourComponent />
    </Provider>
  );
}

export default App;

컴포넌트에서 MobX 상태 사용하기

MobX 상태를 사용하기 위해서는 @inject와 @observer 데코레이터를 사용하여 MobX 상태를 컴포넌트에 주입해야 합니다. 아래 예시를 참고하세요.

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

const YourComponent = inject('store')(observer(({ store }) => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
}));

export default YourComponent;

4. 기존 Redux 코드를 MobX로 대체하기

Redux로 작성된 코드를 MobX로 대체해야 합니다. Redux의 connect 함수를 사용해 연결된 컴포넌트들을 MobX의 inject와 observer 데코레이터로 대체합니다. 필요한 상태와 액션을 MobX 스토어로부터 주입받아 사용하면 됩니다.

// 기존 Redux 코드
import { connect } from 'react-redux';

const YourComponent = ({ count, increment, decrement }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    count: state.count
  };
}

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

// MobX로 대체된 코드
import { inject, observer } from 'mobx-react';

const YourComponent = inject('store')(observer(({ store }) => {
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
}));

export default YourComponent;

5. 테스트 및 디버깅

전환 과정에서 모든 기능이 예상대로 작동하는지 테스트를 진행해야 합니다. MobX는 Redux보다 좀 더 직관적이고 간단한 상태 관리 솔루션이지만, 여전히 버그가 발생할 수 있습니다. Console.log를 통해 상태 변경 및 액션 발생 등을 확인하고, DevTools와 같은 디버깅 도구를 활용하여 문제를 찾아 수정할 수 있습니다.

결론

Redux에서 MobX로의 전환은 React 애플리케이션의 상태 관리 체계를 개선하고 생산성을 향상시킬 수 있는 좋은 방법입니다. 이 가이드를 통해 Redux의 핵심 개념을 이해하고 MobX를 구현하는 과정을 습득할 수 있으며, 기존의 Redux 코드를 쉽게 MobX로 전환할 수 있습니다.

#redux #mobx