MobX를 활용한 서버리스 앱 개발 방법

17 Oct 2023

mobx

이번 글에서는 MobX를 활용하여 서버리스 앱을 개발하는 방법에 대해 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로, React 앱의 복잡한 상태 관리를 간편하게 해주는 도구입니다. MobX의 핵심 개념은 상태와 리액션입니다. 상태는 앱의 데이터 모델을 의미하고, 리액션은 상태를 변경하는 함수입니다.

서버리스 앱은 백엔드 서비스 대신 클라우드 기반의 서비스를 활용하므로, 데이터를 효율적으로 관리하는 것이 중요합니다. MobX는 이를 가능하게 해줍니다.

MobX의 장점

단순함 - MobX는 간단한 구문과 인터페이스를 제공하여 개발자가 쉽게 상태 관리 코드를 작성할 수 있습니다.
리액티브 - MobX는 상태의 변화를 감지하여 자동으로 뷰를 업데이트해주기 때문에, 코드를 간단하고 효율적으로 작성할 수 있습니다.
확장성 - MobX는 유연한 아키텍처를 제공하여 복잡한 앱의 상태 관리를 지원합니다.

서버리스 앱 개발 방법

이제 MobX를 활용하여 서버리스 앱을 개발하는 방법을 알아보겠습니다.

상태 정의하기 - 앱의 데이터 모델을 MobX의 상태로 정의합니다. 이 상태는 앱 전체에서 공유되는 데이터를 담아야 합니다.

class AppState {
  @observable username = "";
  @observable todos = [];

  @action setUsername(username) {
    this.username = username;
  }

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

const appState = new AppState();
export default appState;

컴포넌트에서 상태 사용하기 - MobX의 상태를 컴포넌트에서 사용하기 위해 observer 데코레이터를 활용합니다. 이렇게 하면 상태가 업데이트될 때마다 자동으로 컴포넌트가 리렌더링됩니다.

import { observer } from "mobx-react";
import appState from "./appState";

@observer
class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {appState.username}!</h1>
        <ul>
          {appState.todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}

리액션 사용하기 - 상태를 변경하기 위해 MobX의 리액션을 사용합니다.

import { action } from "mobx";
import appState from "./appState";

@observer
class TodoForm extends React.Component {
  @observable newTodo = "";

  @action handleChange(event) {
    this.newTodo = event.target.value;
  }

  @action handleSubmit(event) {
    event.preventDefault();
    appState.addTodo(this.newTodo);
    this.newTodo = "";
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.newTodo} onChange={this.handleChange} />
        <button type="submit">Add Todo</button>
      </form>
    );
  }
}

위의 세 가지 단계를 반복적으로 활용하여 MobX를 통해 서버리스 앱을 개발할 수 있습니다.

결론

MobX를 활용하면 서버리스 앱의 상태 관리를 간편하고 효율적으로 할 수 있습니다. MobX의 간단한 구문과 리액티브한 특징은 개발자에게 많은 편의를 제공합니다. 서버리스 앱 개발을 고려한다면 MobX를 활용해 보는 것을 추천합니다.

#MobX #서버리스 #앱개발