이번 블로그에서는 JavaScript 라이브러리인 Beautiful DnD를 사용하여 드래그 앤 드롭으로 도형을 만드는 방법에 대해 알아보겠습니다.
Beautiful DnD란?
Beautiful DnD는 React에서 사용할 수 있는 강력한 드래그 앤 드롭 라이브러리입니다. 이 라이브러리는 다양한 유형의 도형들을 웹 페이지에서 쉽게 이동시킬 수 있게 해줍니다.
설치
Beautiful DnD를 사용하기 위해서는 먼저 해당 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.
npm install react-beautiful-dnd
사용법
먼저, Beautiful DnD의 DragDropContext 컴포넌트를 사용하여 드래그 앤 드롭을 적용할 컨테이너를 생성해야 합니다. 이 컨테이너 안에 움직일 도형들을 포함시킬 수 있습니다. 다음은 간단한 예제입니다.
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function App() {
const items = ['도형1', '도형2', '도형3', '도형4'];
return (
<DragDropContext>
<Droppable droppableId="droppable">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{items.map((item, index) => (
<Draggable key={item} draggableId={item} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{item}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}
위의 예제에서는 “도형1”, “도형2”, “도형3”, “도형4”라는 4개의 도형을 생성하고, 이를 DragDropContext와 Droppable, Draggable 컴포넌트 안에 넣어줍니다. draggableId 속성은 각 도형의 고유한 식별자를 나타내며, index 속성은 각 도형의 위치를 나타냅니다.
이벤트 처리
Beautiful DnD에서는 드래그 앤 드롭 관련 이벤트를 다룰 수 있습니다. 아래는 간단한 예제입니다.
// ...
function handleDragEnd(result) {
const { source, destination } = result;
if (!destination) {
return;
}
// 도형의 위치 변경
const updatedItems = Array.from(items);
const [removed] = updatedItems.splice(source.index, 1);
updatedItems.splice(destination.index, 0, removed);
// 도형 위치 업데이트
setItems(updatedItems);
}
return (
<DragDropContext onDragEnd={handleDragEnd}>
{/* ... */}
</DragDropContext>
);
// ...
위의 예제에서는 handleDragEnd라는 이벤트 핸들러를 정의하여 도형의 위치가 변경될 때 호출되도록 합니다. 이 이벤트 핸들러에서는 source와 destination을 통해 도형의 이동 경로를 얻을 수 있습니다. 이를 활용하여 실제 도형의 위치를 업데이트할 수 있습니다.
결론
Beautiful DnD를 사용하면 더 사용자 친화적인 인터페이스를 제공하는 웹 애플리케이션을 쉽게 구현할 수 있습니다. 이번 블로그에서는 Beautiful DnD를 이용한 간단한 드래그 앤 드롭 도형 예제를 살펴보았습니다. 자세한 사용법은 공식 문서를 참고하시기 바랍니다. Happy coding!