MobX를 활용한 모먼트 시간 관리

17 Oct 2023

mobx

매일 우리는 시간을 효율적으로 관리하기 위해 다양한 노력을 기울입니다. 그러나 종종 모먼트 단위로 시간을 관리하는 것은 어려울 수 있습니다. 이 문제를 해결하기 위해 MobX를 사용하여 모먼트 시간 관리 애플리케이션을 구축하는 방법에 대해 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로, React와 함께 사용할 수 있습니다. 이 라이브러리는 상태의 변화를 추적하고, 자동으로 변경사항을 업데이트하는 효율적인 방법을 제공합니다. MobX는 간단한 구문과 직관적인 API를 통해 코드의 가독성을 높이고, 유지 보수를 용이하게 합니다.

모먼트 시간 관리 애플리케이션 구축하기

프로젝트 초기화 및 MobX 설치

먼저 React 프로젝트를 초기화하고, MobX를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요:
```
npx create-react-app moment-app
cd moment-app
yarn add mobx mobx-react
```

상태 관리를 위한 MobX 스토어 생성

src/Store.js 파일을 생성하고, 다음과 같은 코드를 작성하세요:

import { makeObservable, observable, action } from "mobx";

class TimeStore {
  currentTime = new Date();

  constructor() {
    makeObservable(this, {
      currentTime: observable,
      updateTime: action,
    });
  }

  updateTime = () => {
    this.currentTime = new Date();
  };
}

export default new TimeStore();

MobX 스토어와 React 컴포넌트 연결

src/App.js 파일을 수정하고, 다음과 같은 코드로 MobX 스토어를 React 컴포넌트에 연결하세요:

import React from "react";
import { observer } from "mobx-react";
import timeStore from "./Store";

const App = observer(() => {
  return (
    <div>
      <div>현재 시간: {timeStore.currentTime.toString()}</div>
      <button onClick={timeStore.updateTime}>시간 업데이트</button>
    </div>
  );
});

export default App;

앱 실행

터미널에서 yarn start 명령어를 실행하여 앱을 실행하세요. 브라우저에서 “현재 시간”과 “시간 업데이트” 버튼이 표시되어야 합니다. “시간 업데이트” 버튼을 클릭하면 현재 시간이 업데이트됩니다.

결론

MobX를 사용하면 모먼트 단위로 시간을 관리하는 애플리케이션을 쉽게 구축할 수 있습니다. MobX는 React와의 통합도 용이하며, 코드의 가독성과 유지 보수성을 높여줍니다. MobX를 활용하여 시간 관리를 개선해보세요!

#MobX #시간관리