소개

MobX는 상태 관리 라이브러리로, React 애플리케이션에서 쉽게 상태를 관리하고 업데이트할 수 있게 도와줍니다. MobX를 사용하면 코드를 간결하게 유지하면서도 상태 변화에 따라 UI를 자동으로 갱신할 수 있습니다. 이번 글에서는 MobX의 컴퓨티드 값과 타입스크립트의 타입 추론을 결합하여 상태 관리 코드를 더욱 간편하게 작성하는 방법에 대해 알아보겠습니다.

MobX 컴퓨티드 값

MobX 컴퓨티드 값은 다른 상태를 기반으로 계산되는 값입니다. 이는 MobX에서 자동으로 추적되어 해당 값이 의존하는 상태가 변경될 때마다 자동으로 다시 계산됩니다.

import { observable, computed } from 'mobx';

class TodoStore {
  @observable todos = ['Learn MobX', 'Implement computed properties'];
  
  @computed get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }
}

위 예제에서 completedTodos는 todos에 의존하여 계산되는 컴퓨티드 값입니다. MobX는 completedTodos를 읽을 때 마다 해당 값을 조회합니다.

타입스크립트의 타입 추론 활용

타입스크립트는 정적 타입 시스템을 가지고 있어서, 변수 및 함수의 타입을 추론하여 코드를 보다 안전하게 작성할 수 있습니다. MobX와 함께 타입스크립트를 사용하면 상태 관리 코드를 작성하는 과정에서 강력한 타입 추론을 활용할 수 있습니다.

import { observable, computed } from 'mobx';

class Todo {
  id: number;
  @observable text: string;
  @observable completed: boolean;
  
  constructor(id: number, text: string) {
    this.id = id;
    this.text = text;
    this.completed = false;
  }
}

class TodoStore {
  @observable todos: Todo[] = [];
  
  @computed get completedTodos(): Todo[] {
    return this.todos.filter(todo => todo.completed);
  }
}

위 예제에서 Todo 클래스와 TodoStore 클래스에서 @observable 및 @computed 데코레이터를 사용하여 상태를 관리하고, 타입스크립트는 이를 기반으로 타입을 추론합니다. 이를 통해 코드 작성 시 타입에 대한 추가적인 정보를 제공받을 수 있습니다.

결론

MobX의 컴퓨티드 값과 타입스크립트의 타입 추론은 상태 관리 코드를 관리하면서도 타입 안정성을 유지하는 데 매우 유용합니다. 이를 활용하여 안정적이고 유지보수하기 쉬운 MobX 애플리케이션을 작성할 수 있습니다.

참고 문헌:

• MobX 공식 문서
• 타입스크립트 공식 문서