[javascript] 프로덕션 환경에서의 MobX 사용 방법

04 Dec 2023

javascript

프론트엔드 개발에서 상태 관리는 매우 중요한 요소입니다. 상태 관리 라이브러리를 사용하여 애플리케이션의 상태를 깔끔하게 관리할 수 있으며, 이는 프로덕션 환경에서 애플리케이션의 성능과 유지 보수성을 향상시킬 수 있습니다. MobX는 효율적인 상태 관리를 제공하는 인기있는 라이브러리 중 하나입니다. 이 글에서는 MobX를 프로덕션 환경에서 사용하는 방법을 살펴보겠습니다.

1. MobX 설치

먼저, MobX를 설치해야 합니다. npm을 통해 설치할 수 있으며, 다음 명령어를 사용합니다:

npm install mobx mobx-react

2. MobX 스토어 구성

다음으로, MobX 스토어를 구성해야 합니다. 스토어는 애플리케이션의 상태를 관리하는 객체입니다. 다음은 간단한 예시입니다:

import { observable, action } from 'mobx';

class AppStore {
    @observable count = 0;

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

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

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

위 예시에서는 count라는 observable 상태와 increment 및 decrement라는 action 메서드를 가진 AppStore를 정의하고 있습니다. 이렇게 정의된 스토어를 다른 컴포넌트에서 사용할 수 있도록 내보냅니다.

3. MobX 스토어 사용

스토어를 사용하기 위해서는 mobx-react 패키지에서 제공하는 Provider를 사용하여 루트 컴포넌트를 감싸야 합니다. 또한, 필요한 컴포넌트에서는 inject와 observer 데코레이터를 사용하여 스토어를 주입받고 변화를 관찰할 수 있게 해야 합니다.

예를 들어, 다음과 같이 App 컴포넌트가 있다고 가정해봅시다:

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

@inject('store')
@observer
class App extends React.Component {
    render() {
        const { count, increment, decrement } = this.props.store;
        
        return (
            <div>
                <h1>Count: {count}</h1>
                <button onClick={increment}>+</button>
                <button onClick={decrement}>-</button>
            </div>
        );
    }
}

export default App;

위 예시에서는 inject('store')와 observer 데코레이터를 사용하여 App 컴포넌트에서 store 스토어를 주입받고 변화를 관찰할 수 있도록 설정하였습니다. count, increment, decrement 변수는 스토어에서 불러와 사용하고 있습니다.

4. 프로덕션 빌드 설정

프로덕션 환경에서는 코드의 최적화와 불필요한 리렌더링을 방지하기 위해 추가적인 설정이 필요합니다. 예를 들어, Create React App을 사용하고 있다면 react-scripts에서 제공하는 최적화 설정을 사용할 수 있습니다. 또는, Webpack을 직접 설정하고 있다면 react-app-rewired 패키지를 사용하여 설정을 변경할 수도 있습니다.

간단한 예시로 Create React App에서의 설정은 다음과 같이 할 수 있습니다:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build:prod": "GENERATE_SOURCEMAP=false react-scripts build"
}

위 예시에서는 build:prod 스크립트에서 GENERATE_SOURCEMAP을 false로 설정하여 소스 맵 파일을 생성하지 않도록 설정하였습니다. 이렇게 설정하면 프로덕션 빌드에서 소스 맵 파일을 제외하고 번들링되므로, 애플리케이션의 파일 크기를 최적화할 수 있습니다.

결론

이러한 방법을 통해 MobX를 프로덕션 환경에서 사용할 수 있습니다. MobX의 간편한 API와 효율적인 리액트 컴포넌트 관찰 기능을 통해 상태 관리를 더욱 편리하게 하고, 성능과 유지 보수성을 향상시킬 수 있습니다.

1. MobX 설치

2. MobX 스토어 구성

3. MobX 스토어 사용

4. 프로덕션 빌드 설정

결론

참고 자료