MobX는 React 애플리케이션에서 상태 관리를 간단하게 할 수 있는 라이브러리입니다. 리액티브 스토어 패턴은 MobX를 사용하여 애플리케이션의 상태를 관리하는 방법 중 하나입니다. 이 패턴을 사용하면 상태 변경을 감지하고 해당 변경에 대한 업데이트를 자동으로 수행할 수 있습니다.

스토어 클래스 생성하기

MobX를 사용하여 리액티브 스토어 패턴을 구현하려면 먼저 스토어 클래스를 생성해야 합니다. 스토어 클래스는 해당 애플리케이션의 전역 상태를 관리하는 역할을 합니다. 아래는 간단한 스토어 클래스의 예시입니다.

import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];

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

  @action removeTodo = (index) => {
    this.todos.splice(index, 1);
  }
}

export default new TodoStore();

위 코드에서는 @observable 데코레이터를 사용하여 todos 배열을 관찰 가능한 상태로 만들었습니다. @action 데코레이터를 사용하면 해당 메서드가 상태를 변경하는 액션임을 선언할 수 있습니다.

스토어 사용하기

스토어를 사용하여 상태를 업데이트하고, 상태의 변화를 감지할 수 있습니다. 예를 들어, TodoList 컴포넌트에서 투두 아이템을 추가하고 삭제해보겠습니다.

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

const TodoList = observer(() => {
  return (
    <div>
      {todoStore.todos.map((todo, index) => (
        <div key={index}>{todo}</div>
      ))}
      <button onClick={() => todoStore.addTodo('New Todo')}>Add Todo</button>
      <button onClick={() => todoStore.removeTodo(0)}>Remove Todo</button>
    </div>
  );
});

export default TodoList;

위 코드에서는 @observer 데코레이터를 추가하여 TodoList 컴포넌트를 관찰 가능한 컴포넌트로 만들어주었습니다. 그리고 todoStore 스토어를 가져와서 todos 배열의 값을 렌더링하고, addTodo와 removeTodo 메서드를 호출하여 상태를 변경할 수 있습니다.

결론

MobX를 사용하여 리액티브 스토어 패턴을 구현하면 상태 관리가 간편해지고 상태의 변화를 자동으로 감지하여 업데이트를 수행할 수 있습니다. 이를 통해 리액트 애플리케이션의 상태 관리를 보다 효율적으로 할 수 있습니다.

더 많은 정보를 원하신다면 MobX 공식 문서를 참고하시기 바랍니다.

#mobx #리액티브스토어