[javascript] MobX와 데이터 정렬

04 Dec 2023

MobX는 JavaScript 앱의 상태 관리를 위한 라이브러리입니다. 애플리케이션의 데이터를 쉽게 관리하고 갱신할 수 있도록 해줍니다. 이번에는 MobX를 사용하여 데이터 정렬을 다루는 방법에 대해 알아보겠습니다.

데이터 정렬 기능 구현하기

먼저, 정렬할 데이터를 Observable로 만들어야 합니다. MobX에서 Observable은 상태를 관찰할 수 있게끔 해주는 객체입니다. 예를 들어, 다음과 같이 Observable 배열을 생성할 수 있습니다.

import { observable } from 'mobx';

const data = observable([
  { id: 1, name: 'John' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Bob' }
]);

다음으로, 데이터를 정렬할 함수를 작성해야 합니다. 정렬 함수는 원하는 기준에 따라 데이터를 정렬하는 역할을 합니다. 예를 들어, 이름으로 오름차순으로 정렬하는 함수는 다음과 같이 작성할 수 있습니다.

const sortByName = () => {
  data.replace(data.slice().sort((a, b) => {
    return a.name.localeCompare(b.name);
  }));
};

마지막으로, 정렬 함수를 실행하여 데이터를 정렬할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 데이터가 이름으로 정렬되도록 하는 경우는 다음과 같이 작성할 수 있습니다.

<button onClick={sortByName}>이름으로 정렬</button>

이렇게 MobX를 사용하여 데이터 정렬 기능을 구현할 수 있습니다. MobX는 상태 관리를 간편하게 해주는 강력한 도구이며, 데이터 정렬 뿐 아니라 다양한 기능을 구현할 수 있습니다.