이번 기술 블로그에서는 MobX를 사용하여 데이터를 필터링하고 정렬하는 방법에 대해 알아보겠습니다. MobX는 상태 관리 라이브러리로, 반응형 애플리케이션을 쉽게 개발할 수 있도록 도와줍니다.

MobX란?

MobX는 JavaScript와 TypeScript의 상태 관리 라이브러리입니다. 이 라이브러리는 단방향 데이터 흐름과 함께 상태를 변경하고 추적할 수 있도록 도와줍니다. MobX를 사용하면 UI 컴포넌트가 자동으로 업데이트되어 데이터의 변화를 실시간으로 반영할 수 있습니다.

데이터 필터링 및 정렬 예제

MobX를 사용하여 데이터를 필터링하고 정렬하는 예제를 알아보겠습니다. 아래는 간단한 Todo 목록을 가지고 있는 상태 관리 클래스입니다.

import { observable } from 'mobx';

class TodoStore {
  @observable todos = [
    { id: 1, text: 'Task 1', completed: false },
    { id: 2, text: 'Task 2', completed: true },
    { id: 3, text: 'Task 3', completed: false },
  ];
}

이제 MobX의 computed를 사용하여 필터링 및 정렬된 데이터를 가져올 수 있는 getter 메소드를 추가해 보겠습니다.

import { observable, computed } from 'mobx';

class TodoStore {
  @observable todos = [
    { id: 1, text: 'Task 1', completed: false },
    { id: 2, text: 'Task 2', completed: true },
    { id: 3, text: 'Task 3', completed: false },
  ];

  @observable filter = '';

  @computed get filteredTodos() {
    const filteredTodos = this.todos.filter(todo =>
      todo.text.toLowerCase().includes(this.filter.toLowerCase())
    );

    return filteredTodos.sort((a, b) =>
      a.text.localeCompare(b.text)
    );
  }
}

위 예제에서는 filteredTodos라는 computed getter 메소드를 정의하였습니다. 이 메소드는 filter 상태에 따라 필터링되고 정렬된 todos 배열을 반환합니다. filter 상태는 사용자의 입력에 따라 업데이트되고, computed getter 메소드는 todos와 filter 상태가 변경될 때마다 자동으로 호출됩니다.

이제 UI 컴포넌트에서 filteredTodos를 사용하여 필터링 및 정렬된 데이터를 렌더링할 수 있습니다.

결론

MobX를 사용하면 데이터의 필터링 및 정렬과 같은 상태 관리 작업을 간편하게 처리할 수 있습니다. MobX의 반응성을 통해 데이터의 변화를 실시간으로 반영할 수 있으며, computed getter 메소드를 사용하여 필요한 데이터를 자동으로 도출할 수 있습니다.

더 많은 MobX 사용 예제와 기능에 대해 알아보려면 공식 MobX 문서를 참조하세요.

참고 자료:

• MobX 공식 문서
• MobX GitHub 저장소