[javascript] Parcel에서 MobX를 사용하는 방법은?

22 Nov 2023

javascript

먼저, 프로젝트 디렉토리에서 필요한 패키지를 설치해야 합니다. 터미널에서 다음 명령어를 실행합니다:

npm install mobx mobx-react

이제 MobX를 사용하기 위해 필요한 코드를 작성해보겠습니다.

index.js 파일을 만들고 다음 내용을 추가합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import { configure } from 'mobx';
import { Provider } from 'mobx-react';

import App from './App';
import Store from './Store';

configure({
  enforceActions: 'observed',
});

const store = new Store();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Store.js 파일을 만들고 다음 내용을 추가합니다:

import { observable, action } from 'mobx';

class Store {
  @observable counter = 0;

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

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

export default Store;

App.js 파일을 만들고 다음 내용을 추가합니다:

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

import { StoreContext } from './Store';

const App = observer(() => {
  const store = useContext(StoreContext);

  return (
    <div>
      <h1>Counter: {store.counter}</h1>
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
});

export default App;

위 코드에서는 MobX의 observable과 action 데코레이터를 사용하여 상태를 관리합니다. Provider 컴포넌트로 전역적으로 상태를 제공하고, observer를 사용하여 상태 변화를 감지하고 자동으로 뷰를 업데이트합니다.

마지막으로, HTML 파일에 <div id="root"></div>를 추가한 후, 애플리케이션을 시작할 수 있습니다.

이제 Parcel을 실행하고 MobX를 사용하는 애플리케이션을 빌드하고 실행할 수 있습니다. 터미널에서 다음 명령어를 실행합니다:

parcel index.html

이제 애플리케이션을 웹 브라우저에서 확인할 수 있습니다. 현재 카운터 값이 표시되며 증가 및 감소 버튼을 클릭하면 값이 변화합니다.

참고: 이 예제는 MobX의 기본 사용법을 보여주는 간단한 예제입니다. MobX의 더 많은 기능과 사용 방법을 알아보려면 MobX 공식 문서를 참조하시기 바랍니다.

References