MobX를 사용한 라이브 데이터 업데이트 처리 방법

17 Oct 2023

mobx

MobX는 상태 관리 라이브러리로, 자바스크립트 애플리케이션에서 사용자 인터페이스와 상태 간의 상호작용을 쉽게 관리할 수 있도록 도와줍니다. 이번 블로그 포스트에서는 MobX를 사용하여 라이브 데이터 업데이트를 처리하는 방법을 알아보겠습니다.

1. MobX 설치

MobX를 사용하기 위해서는 먼저 프로젝트에 MobX를 설치해야 합니다. npm을 사용하여 MobX를 설치할 수 있습니다.

npm install mobx mobx-react

2. 상태 관리 클래스 생성

데이터 업데이트를 위해 MobX에서 사용할 상태 관리 클래스를 생성해야 합니다. 이 클래스에서 데이터를 저장하고, 이를 업데이트하고, 관찰할 수 있습니다.

예시로, ToDoList 앱에서 할 일 목록을 관리하는 ToDoStore 클래스를 만들어보겠습니다.

import { observable, action } from 'mobx';

class ToDoStore {
  @observable todos = [];

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

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

export default new ToDoStore();

위의 코드에서 todos는 관찰 가능한 배열로, addTodo와 removeTodo 액션을 통해 배열을 업데이트할 수 있습니다.

3. 컴포넌트에서 상태 사용

상태 관리 클래스를 생성한 후, 컴포넌트에서 이 클래스를 사용하여 상태를 업데이트할 수 있습니다.

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

const ToDoList = observer(() => {
  const handleAddTodo = () => {
    ToDoStore.addTodo('New Todo');
  }

  const handleRemoveTodo = (todo) => {
    ToDoStore.removeTodo(todo);
  }

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {ToDoStore.todos.map(todo => (
          <li key={todo}>
            {todo}
            <button onClick={() => handleRemoveTodo(todo)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
});

export default ToDoList;

위의 코드에서 ToDoList 컴포넌트는 ToDoStore에서 가져온 todos를 사용하여 동적으로 할 일 목록을 표시하고 업데이트할 수 있습니다. observer를 사용하여 MobX와 함께 컴포넌트가 자동으로 다시 렌더링되도록 만들었습니다.

결론

MobX는 간단하고 직관적인 API를 제공하여 라이브 데이터 업데이트를 손쉽게 처리할 수 있습니다. 이번 포스트를 통해 MobX를 사용하여 상태 관리 클래스를 생성하고 컴포넌트에서 데이터를 업데이트하는 방법을 알아보았습니다. MobX를 적용하면 애플리케이션의 상태 관리 작업을 더욱 간단하게 처리할 수 있습니다.

#MobX #상태관리