Colin's Blog
[javascript] MobX와 상태 유지

MobX는 JavaScript 애플리케이션에서 상태 관리를 간편하게 할 수 있도록 도와주는 상태 관리 라이브러리입니다. 이 라이브러리는 React와 함께 사용하면 효과적인 상태 관리를 할 수 있습니다.

상태 유지란?

상태 유지(State Persistence)는 애플리케이션의 상태를 오래 저장하고 유지하는 것을 의미합니다. 일반적으로 웹 애플리케이션이나 모바일 애플리케이션에서는 사용자의 세션 정보, 설정, 프로필 정보 등을 상태로 저장하여 다시 사용할 수 있도록 합니다.

상태 관리를 위해 보통 로컬 스토리지(local storage)나 서버에 데이터를 저장하는 방법을 사용합니다. 하지만 MobX는 이러한 상태 관리를 더욱 쉽고 간단하게 할 수 있도록 도와줍니다.

MobX의 주요 개념

MobX는 일반적으로 아래와 같은 주요 개념들로 이루어져 있습니다.

Observable

Observable은 상태를 나타내는 변수나 객체입니다. 이를 통해 상태가 변경될 때 알림을 받을 수 있습니다. 예를 들어, observable 데코레이터를 사용하여 Observable 객체를 생성할 수 있습니다.

import { observable } from 'mobx';

class AppState {
  @observable name = "John";
  @observable age = 25;
}

Observer

Observer는 Observable 객체를 구독하여 상태 변경을 감지하고, 필요한 동작을 수행하는 함수입니다. 주로 React 컴포넌트 함수에서 사용됩니다. 예를 들어, observer 데코레이터를 사용하여 Observer 함수를 생성할 수 있습니다.

import { observer } from 'mobx-react';

@observer
class UserProfile extends React.Component {
  render() {
    // ...
  }
}

Action

Action은 상태 변경을 일으키는 함수입니다. Observable 객체의 값을 변경하는 동작을 포함하고 있습니다. Action을 사용하여 상태 변경을 추적할 수 있습니다. 예를 들어, action 데코레이터를 사용하여 Action 함수를 생성할 수 있습니다.

import { action } from 'mobx';

class AppState {
  @observable name = "John";
  @observable age = 25;

  @action
  updateName(newName) {
    this.name = newName;
  }
}

상태 유지 예제

MobX를 사용하여 상태 유지를 구현하는 예제를 살펴보겠습니다.

import { observable, action } from 'mobx';

class UserStore {
  @observable currentUser = null;

  @action
  login(user) {
    this.currentUser = user;
  }

  @action
  logout() {
    this.currentUser = null;
  }
}

const userStore = new UserStore();

// 로그인
userStore.login({ id: 1, username: 'john' });

// 로그아웃
userStore.logout();

위 예제에서는 UserStore 클래스를 생성하여 currentUser라는 Observable 변수를 가지고 있습니다. login 액션은 사용자를 로그인하고 currentUser를 업데이트하고, logout 액션은 currentUser를 null로 설정하여 로그아웃합니다.

MobX를 사용하면 애플리케이션의 상태를 쉽게 유지하고 업데이트할 수 있습니다. 상태 유지를 통해 저장된 데이터를 사용하는 동안에도 사용자 경험을 개선할 수 있습니다.

결론

MobX는 JavaScript 애플리케이션에서 상태 관리를 간편하게 할 수 있도록 도와주는 라이브러리입니다. Observable, Observer, Action과 같은 개념을 사용하여 상태 유지를 구현할 수 있습니다. MobX를 사용하면 애플리케이션의 상태 관리를 효과적으로 할 수 있으며, 상태 유지를 통해 저장된 데이터를 간편하게 사용할 수 있습니다.

© 2018 Colin. All rights reserved.