본 포스트에서는 Beautiful Dnd 라이브러리를 사용하여 JavaScript로 드래그 앤 드롭 인터랙션을 구현하고 요소의 속성을 변경하는 방법을 알아보겠습니다.

1. Beautiful Dnd 라이브러리 설치하기

Beautiful Dnd는 React 컴포넌트를 기반으로 한 드래그 앤 드롭 기능을 제공하는 라이브러리입니다. 따라서 Beautiful Dnd를 사용하려면 React 프로젝트가 미리 설치되어 있어야 합니다. React를 사용하는 방법에 대한 설명은 이 포스트의 범위를 넘어섭니다. React 개발 환경이 설정되어 있다고 가정하고 Beautiful Dnd를 설치하겠습니다.

먼저, npm을 사용하여 Beautiful Dnd를 설치합니다.

npm install react-beautiful-dnd

2. Beautiful Dnd를 사용하여 드래그 앤 드롭 구현하기

Beautiful Dnd를 사용하여 드래그 앤 드롭을 구현하는 방법은 다음과 같습니다.

2.1. 필요한 모듈 import 하기

먼저 Beautiful Dnd에서 제공하는 필요한 모듈을 import 합니다.

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

2.2. 드래그 앤 드롭 가능한 요소 만들기

드래그 앤 드롭이 가능한 요소를 만들기 위해 Draggable 컴포넌트를 사용합니다. Draggable 컴포넌트는 draggableId와 index prop을 가지며, draggableId는 해당 요소의 고유 식별자이고, index는 해당 요소의 순서를 나타냅니다.

<Draggable draggableId="item-1" index={0}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
    >
      Item 1
    </div>
  )}
</Draggable>

2.3. 드롭 가능한 영역 만들기

드롭 가능한 영역을 만들기 위해 Droppable 컴포넌트를 사용합니다. Droppable 컴포넌트는 droppableId prop을 가지며, 해당 영역에 드롭이 가능한 요소들을 포함해야 합니다.

<Droppable droppableId="droppable-area">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.droppableProps}
    >
      {/* 드롭 가능한 요소들 */}
    </div>
  )}
</Droppable>

2.4. DragDropContext로 요소들의 드래그 앤 드롭 이벤트 처리하기

DragDropContext 컴포넌트를 사용하여 요소들의 드래그 앤 드롭 이벤트를 처리합니다. DragDropContext 컴포넌트에는 onDragEnd prop을 전달해 드래그 앤 드롭 이벤트가 발생했을 때 처리할 로직을 작성합니다.

<DragDropContext onDragEnd={handleDragEnd}>
  {/* 드래그 앤 드롭이 가능한 요소들 */}
</DragDropContext>

2.5. 드래그 앤 드롭 이벤트 처리 로직 작성하기

onDragEnd prop으로 전달한 handleDragEnd 함수에서 드래그 앤 드롭 이벤트 처리 로직을 작성합니다. 이 예시에서는 드래그 앤 드롭으로 요소의 순서를 변경하는 로직을 작성하겠습니다.

const handleDragEnd = (result) => {
  const { destination, source } = result;

  // 드롭 영역 외부로 드롭했을 때
  if (!destination) {
    return;
  }

  // 드래그 앤 드롭으로 요소 순서 변경
  const items = Array.from(items);
  const [reorderedItem] = items.splice(source.index, 1);
  items.splice(destination.index, 0, reorderedItem);

  // 변경된 요소 목록 반영
  setItems(items);
};

3. 결론

이렇게 Beautiful Dnd를 사용하여 JavaScript로 드래그 앤 드롭 인터랙션을 구현하고 요소의 속성을 변경할 수 있습니다. Beautiful Dnd는 강력한 기능을 제공하며, DragDropContext, Draggable, Droppable 컴포넌트를 적절히 활용하여 다양한 드래그 앤 드롭 기능을 구현할 수 있습니다.

더 자세한 내용은 Beautiful Dnd 공식 문서를 참고하세요.