[javascript] MobX의 예제 프로젝트

04 Dec 2023

javascript

이번 글에서는 MobX를 사용한 간단한 예제 프로젝트를 만들어 보겠습니다. MobX는 상태 관리 라이브러리로, 리액트와 함께 사용할 수 있습니다. 이 예제 프로젝트에서는 간단한 할 일 목록을 관리하는 앱을 만들어 보겠습니다.

프로젝트 설정

아래의 명령어를 사용하여 프로젝트를 생성합니다.

npx create-react-app mobx-example

프로젝트 생성이 완료되면, 프로젝트 폴더로 이동하여 MobX 라이브러리를 설치합니다.

cd mobx-example
npm install mobx mobx-react

상태 관리

MobX를 사용하여 상태를 관리하기 위해, state와 action을 정의합니다. 이 예제에서는 TodoStore라는 MobX 스토어를 생성하여 할 일 목록과 관련된 상태를 관리할 것입니다.

import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];

  @action addTodo = (title) => {
    this.todos.push(title);
  }

  @action removeTodo = (title) => {
    this.todos = this.todos.filter(todo => todo !== title);
  }
}

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

위의 코드에서 @observable은 상태를 관찰할 수 있게 만들어주고, @action은 상태를 변경할 수 있는 메소드임을 나타냅니다. addTodo 메소드는 새로운 할 일을 추가하고, removeTodo 메소드는 해당 할 일을 제거합니다.

컴포넌트 구현

이제 할 일 목록을 보여주는 컴포넌트와 사용자 입력을 받는 컴포넌트를 구현해 보겠습니다.

import React from 'react';
import { observer } from 'mobx-react';
import { useLocalObservable } from 'mobx-react-lite';
import todoStore from './TodoStore';

const TodoList = observer(() => {
  const { todos } = useLocalObservable(() => todoStore);

  return (
    <div>
      <h2>Todo List:</h2>
      {todos.map(todo => (
        <div key={todo}>{todo}</div>
      ))}
    </div>
  );
});

const TodoForm = observer(() => {
  const { addTodo } = useLocalObservable(() => todoStore);
  const [title, setTitle] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo(title);
    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={e => setTitle(e.target.value)} />
      <button type="submit">Add Todo</button>
    </form>
  );
});

const App = () => {
  return (
    <div>
      <TodoList />
      <TodoForm />
    </div>
  );
};

export default App;

TodoList 컴포넌트는 TodoStore의 todos 상태를 구독하여 이를 표시합니다. TodoForm 컴포넌트에서는 사용자의 입력을 받아 addTodo 메소드를 호출하여 할 일을 추가합니다.

사용

프로젝트를 실행하여 결과를 확인해 보겠습니다.

npm start

브라우저에서 http://localhost:3000으로 접속하면 할 일 목록을 추가하고 제거할 수 있는 앱을 볼 수 있습니다.

이상으로 MobX를 사용한 간단한 예제 프로젝트를 만들어 보았습니다. MobX를 사용하면 복잡한 상태 관리를 간단하게 처리할 수 있으므로, 리액트 프로젝트에서 효과적으로 사용할 수 있습니다.

참고 자료: