[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 포스트잇 만들기

21 Nov 2023

javascript

드래그 앤 드롭 기능을 활용한 인터랙티브한 웹 애플리케이션을 구현하려면 Beautiful Dnd 라이브러리를 사용할 수 있습니다. Beautiful Dnd는 리액트 기반의 드래그 앤 드롭 라이브러리로, 간편한 설정과 다양한 커스터마이징 옵션을 제공합니다. 이번 포스트에서는 Beautiful Dnd를 이용하여 실제 포스트잇을 드래그 앤 드롭으로 움직일 수 있는 기능을 구현하는 방법을 알아보겠습니다.

1. Beautiful Dnd 설치 및 설정

Beautiful Dnd를 사용하기 위해서는 먼저 패키지를 설치해야 합니다. 프로젝트의 폴더에서 다음 명령을 실행하여 패키지를 설치합니다:

npm install react-beautiful-dnd

Beautiful Dnd의 주요 컴포넌트들은 DragDropContext, Droppable, Draggable입니다. DragDropContext는 드래그 앤 드롭 기능을 제공하는 컴포넌트를 감싸는 역할을 합니다.

만일 React를 사용한다면, index.js 파일에 다음과 같이 설정합니다:

import React from 'react';
import ReactDOM from 'react-dom';
import { DragDropContext } from 'react-beautiful-dnd';
import App from './App';

ReactDOM.render(
  <DragDropContext>
    <App />
  </DragDropContext>,
  document.getElementById('root')
);

2. Droppable 및 Draggable 구성

Draggable은 드래그 앤 드롭이 가능한 개별 아이템을 의미하고, Droppable은 Draggable 아이템을 받아들이는 영역입니다. 드롭 가능한 영역을 만들기 위해 컴포넌트를 다음과 같이 구성합니다:

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

const Column = () => {
  return (
    <Droppable droppableId="column-1">
      {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
          {items.map((item, index) => (
            <Draggable key={item.id} draggableId={item.id} index={index}>
              {(provided) => (
                <div
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  ref={provided.innerRef}
                >
                  {item.content}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

위의 코드는 Column 컴포넌트 내에 Droppable과 Draggable을 구성한 예시입니다. Droppable 컴포넌트는 droppableId 값으로 해당 영역을 식별하며, Draggable 컴포넌트는 draggableId와 index 값을 통해 각각의 아이템을 식별합니다. 실제로 드래그 앤 드롭을 지원하기 위해 dragProps와 dragHandleProps를 적용하고, 아이템들의 목록을 출력합니다. provided.placeholder는 아이템의 드롭 위치를 시각적으로 나타냅니다.

3. 드롭 이벤트 처리

드롭 이벤트가 발생했을 때, Beautiful Dnd는 onDragEnd 이벤트 콜백을 호출합니다. 이 콜백을 활용하여 드롭한 아이템의 위치를 변경하거나 추가적인 로직을 처리할 수 있습니다. React 컴포넌트에서 onDragEnd 콜백을 다음과 같이 설정할 수 있습니다:

import { onDragEnd } from 'react-beautiful-dnd';

const onDragEnd = (result) => {
  // 드래그 이벤트 발생 후 실행되는 로직
};

<DragDropContext onDragEnd={onDragEnd}>
  // ...
</DragDropContext>

4. 결론

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 포스트잇을 만들었습니다. 이제 DragDropContext, Droppable, Draggable을 활용하여 여러 영역들로 구성된 드래그 앤 드롭 인터페이스를 만들 수 있습니다. Beautiful Dnd의 자세한 사용법과 다양한 커스터마이징 옵션은 공식 문서를 참고해 주세요.

1. Beautiful Dnd 설치 및 설정

2. Droppable 및 Draggable 구성

3. 드롭 이벤트 처리

4. 결론

References