Colin's Blog
[javascript] MobX와 드래그 앤 드롭 처리

드래그 앤 드롭(Drag and Drop) 기능은 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이 기능을 구현하면 사용자는 마우스를 사용하여 요소를 드래그하고 원하는 위치로 이동시킬 수 있습니다. 이번 기술 블로그에서는 MobX와 함께 드래그 앤 드롭 처리를 어떻게 구현하는지 알아보겠습니다.

MobX란?

MobX는 상태 관리 라이브러리로, React와 함께 사용되는 것이 가장 일반적입니다. MobX는 애플리케이션의 상태를 추적하고, 이를 자동으로 감지하여 화면을 업데이트합니다. 이러한 특성은 드래그 앤 드롭 처리와 같은 상호 작용적인 기능을 구현할 때 매우 유용합니다.

드래그 앤 드롭 처리 구현하기

드래그 앤 드롭 처리를 구현하기 위해서는 다음과 같은 단계를 따라야 합니다:

  1. 드래그되는 요소의 상태를 MobX로 관리합니다.
  2. 요소를 드래그할 때 발생하는 이벤트를 처리합니다.
  3. 드롭될 위치에 대한 정보를 받아 처리합니다.

먼저, MobX를 설치하고 상태를 관리할 클래스를 생성합니다:

import { observable, action } from 'mobx';

class DraggableItemStore {
  @observable position = { x: 0, y: 0 };

  @action
  setPosition(x, y) {
    this.position.x = x;
    this.position.y = y;
  }
}

export default new DraggableItemStore();

다음으로, 드래그 이벤트를 처리하는 컴포넌트를 만듭니다:


import React from 'react';
import { useObserver } from 'mobx-react-lite';
import DraggableItemStore from './DraggableItemStore';

const DraggableItem = () => {
  const handleDragStart = () => {
    // 드래그 시작 시 처리할 로직
  };

  const handleDragEnd = () => {
    // 드롭 시 처리할 로직
  };

  const handleDrag = (event) => {
    const { clientX, clientY } = event;

    DraggableItemStore.setPosition(clientX, clientY);
  };

  return useObserver(() => (
    <div
      draggable="true"
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onDrag={handleDrag}
      style={{ position: 'absolute', left: DraggableItemStore.position.x, top: DraggableItemStore.position.y }}
    >
      드래그할 요소
    </div>
  ));
};

export default DraggableItem;

마지막으로, 드롭될 위치에서의 처리를 구현하는 컴포넌트를 생성합니다:


import React from 'react';
import { useObserver } from 'mobx-react-lite';
import DraggableItemStore from './DraggableItemStore';

const DropZone = () => {
  const handleDrop = (event) => {
    const { clientX, clientY } = event;

    // 드롭된 위치에 대한 처리 로직
  };

  return useObserver(() => (
    <div onDrop={handleDrop} style={{ width: '300px', height: '300px', backgroundColor: '#f1f1f1' }}>
      드롭 영역
    </div>
  ));
};

export default DropZone;

위의 코드에서는 DraggableItemStore 클래스를 사용하여 드래그되는 요소의 위치를 갱신하고, useObserver 훅을 사용하여 MobX 상태의 변화를 감지합니다. 드래그 이벤트 발생 시 handleDrag 함수에서 DraggableItemStore.setPosition 메서드를 호출하여 요소의 위치를 변경합니다. 또한, 드롭 영역에서는 handleDrop 함수를 사용하여 드롭된 위치에 대한 처리를 구현합니다.

이제, DraggableItem 컴포넌트와 DropZone 컴포넌트를 적절한 위치에 렌더링하면 드래그 앤 드롭 처리가 완료됩니다.

이것은 MobX와 함께 드래그 앤 드롭 처리를 구현한 간단한 예제입니다. MobX를 사용하면 상태 관리가 간편해지고, 복잡한 상호 작용을 구현하는 데 유용한 도구가 될 수 있습니다.

결론

MobX는 드래그 앤 드롭 처리와 같은 상호 작용적인 기능을 구현할 때 매우 유용한 상태 관리 라이브러리입니다. 이번 기술 블로그에서는 MobX를 사용하여 간단한 드래그 앤 드롭 처리를 구현하는 방법을 살펴보았습니다. MobX를 활용하여 복잡한 상호 작용을 구현해보시기 바랍니다.

© 2018 Colin. All rights reserved.