[javascript] MobX와 드래그 앤 드롭 리스팅

04 Dec 2023

javascript

드래그 앤 드롭 기능이 있는 리스팅은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 아이템을 드래그하여 다른 위치로 이동시킬 수 있도록 하는 기능이며, 상태 관리 라이브러리인 MobX와 함께 사용하면 효과적으로 구현할 수 있습니다.

MobX란?

MobX는 React 애플리케이션에서 상태 관리를 도와주는 JavaScript 라이브러리입니다. MobX는 관찰 가능한 상태(observed state)와 이를 변경하는 동작(actions)을 통해 애플리케이션의 상태를 자동으로 업데이트합니다. 이러한 특성으로 인해 드래그 앤 드롭 리스팅과 같은 상태 관리에 용이한 라이브러리입니다.

드래그 앤 드롭 리스팅 구현하기

드래그 앤 드롭 리스팅을 구현하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

초기 상태 설정: MobX를 사용하기 위해 상태(state)를 관찰 가능한 상태로 만들어야 합니다. 이를 위해 MobX의 observable 데코레이터를 사용합니다. 예를 들어, items라는 배열을 관찰 가능한 상태로 만들 수 있습니다.

import { observable } from 'mobx';

class ItemStore {
  @observable items = ['item1', 'item2', 'item3'];
}

드래그 앤 드롭 이벤트 처리: 사용자의 액션에 따라 아이템의 위치를 변경해야 합니다. 이를 위해 MobX의 actions 데코레이터를 사용하여 상태를 변경하는 함수를 만듭니다.

import { observable, action } from 'mobx';

class ItemStore {
  @observable items = ['item1', 'item2', 'item3'];

  @action
  moveItem(oldIndex, newIndex) {
    const item = this.items.splice(oldIndex, 1)[0];
    this.items.splice(newIndex, 0, item);
  }
}

드래그 앤 드롭 이벤트 바인딩: 실제로 드래그 앤 드롭 이벤트와 상태 변경 함수를 바인딩하여 작동하도록 해야 합니다. 이를 위해 React의 드래그 앤 드롭 API나 외부 라이브러리를 사용하여 이벤트를 처리하고, 그 안에서 상태 변경 함수를 호출합니다.

import { observer } from 'mobx-react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

@observer
class ItemList extends React.Component {
  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="items">
          {(provided) => (
            <ul {...provided.droppableProps} ref={provided.innerRef}>
              {itemStore.items.map((item, index) => (
                <Draggable key={item} draggableId={item} index={index}>
                  {(provided) => (
                    <li
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      {item}
                    </li>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>
    );
  }

  onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    itemStore.moveItem(result.source.index, result.destination.index);
  }
}

위와 같이 MobX와 드래그 앤 드롭 기능을 결합하여 웹 애플리케이션에서 쉽게 리스팅을 구현할 수 있습니다.

결론

MobX는 React 애플리케이션에서 상태 관리를 도와주는 강력한 라이브러리입니다. 드래그 앤 드롭 리스팅과 같은 상태 변경이 필요한 기능을 구현할 때 MobX를 활용하면 효율적이고 유지보수가 쉬운 코드를 작성할 수 있습니다.

참고 자료: