[javascript] MobX와 데이터 필터링

04 Dec 2023

javascript

MobX는 JavaScript 애플리케이션 상태 관리를 위한 간단하고 효과적인 라이브러리입니다. 그리고 데이터 필터링은 애플리케이션에서 특정 조건에 맞는 데이터만 선택하는 것을 의미합니다. 이번 글에서는 MobX를 사용하여 데이터를 필터링하는 방법에 대해 알아보겠습니다.

1. MobX 소개

MobX는 리액트 애플리케이션과 함께 사용하기에 특히 유용한 상태 관리 라이브러리입니다. MobX를 사용하면 상태 값과 그와 관련된 액션을 간단하게 정의하고, 이들을 자동으로 관리할 수 있습니다. 이러한 특징은 애플리케이션의 복잡성을 줄이고 개발자들이 코드를 더 쉽게 이해하고 유지보수할 수 있는 장점을 제공합니다.

2. 데이터 필터링 예제

MobX를 사용하여 데이터를 필터링하는 방법을 예제를 통해 살펴보겠습니다. 아래의 코드는 사용자 목록을 저장하고 필터링하는 기능을 가진 MobX 스토어 클래스의 예시입니다.

import { makeObservable, observable, action, computed } from 'mobx';

class UserStore {
  users = [];
  filterText = '';

  constructor() {
    makeObservable(this, {
      users: observable,
      filterText: observable,
      addUser: action,
      setFilter: action,
      filteredUsers: computed,
    });
  }

  addUser(user) {
    this.users.push(user);
  }

  setFilter(text) {
    this.filterText = text;
  }

  get filteredUsers() {
    return this.users.filter(user => user.includes(this.filterText));
  }
}

const userStore = new UserStore();

export default userStore;

위 코드에서 UserStore 클래스는 MobX의 makeObservable 함수로 옵저버블 값(users와 filterText)과 관련 액션들(addUser와 setFilter)을 설정하고 있습니다. filteredUsers는 computed로 정의되어 있으며, 현재 필터링된 사용자 목록을 반환합니다.

3. 데이터 필터링 사용 예시

이제 위에서 정의한 UserStore를 사용하여 데이터 필터링을 구현해보겠습니다. 아래의 코드는 리액트 함수형 컴포넌트에서 UserStore를 사용하여 사용자 목록을 필터링하는 예시입니다.

import React, { useState } from 'react';
import { observer } from 'mobx-react-lite';
import userStore from './userStore';

const UserList = observer(() => {
  const [text, setText] = useState('');

  const handleFilterChange = (e) => {
    setText(e.target.value);
    userStore.setFilter(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleFilterChange} />
      <ul>
        {userStore.filteredUsers.map(user => (
          <li key={user}>{user}</li>
        ))}
      </ul>
    </div>
  );
});

export default UserList;

위 코드에서 UserList 컴포넌트는 MobX의 observer 함수로 감싸져 있습니다. 이를 통해 UserList 컴포넌트는 UserStore의 상태를 관찰하고, 상태가 변경되면 자동으로 리렌더링되도록 할 수 있습니다. handleFilterChange 함수는 입력창의 값이 변경될 때마다 호출되며, 입력된 값으로 UserStore의 필터를 업데이트합니다. 그리고 필터링된 사용자 목록은 UserStore의 filteredUsers 속성을 통해 가져옵니다.

4. 결론

이번 글에서는 MobX를 사용하여 데이터를 필터링하는 방법에 대해 알아보았습니다. MobX는 간단하면서도 강력한 상태 관리 솔루션을 제공하므로, 복잡한 애플리케이션에서 데이터 필터링을 구현하는 데 유용하게 활용될 수 있습니다. MobX 문서와 예제들을 참고하여 더욱 자세한 사용법을 익히는 것을 추천합니다.

1. MobX 소개

2. 데이터 필터링 예제

3. 데이터 필터링 사용 예시

4. 결론

참고 자료