드래그 앤 드롭(Drag and Drop) 기능은 웹 애플리케이션에서 많이 사용되며 사용자 경험을 향상시키는 데 큰 역할을 합니다. 이번 포스트에서는 Beautiful Dnd 라이브러리를 사용하여 JavaScript로 드래그 앤 드롭으로 카드를 만들어보겠습니다.
Beautiful Dnd란?
Beautiful Dnd는 React에서 사용 가능한 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 원하는 요소를 쉽게 드래그하여 다른 위치로 이동시킬 수 있습니다. 또한 Beautiful Dnd는 매우 유연하며 성능이 우수하다는 특징을 가지고 있습니다.
Beautiful Dnd 설치하기
Beautiful Dnd를 사용하기 위해서는 먼저 React 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. 다음 명령어를 사용하여 Beautiful Dnd를 설치합니다.
npm install react-beautiful-dnd
Beautiful Dnd를 이용한 카드 만들기
이제 Beautiful Dnd를 이용하여 드래그 앤 드롭으로 카드를 만들어보겠습니다. 먼저 CardList 컴포넌트를 생성합니다.
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const CardList = () => {
const tasks = [
{ id: '1', content: 'Task 1' },
{ id: '2', content: 'Task 2' },
{ id: '3', content: 'Task 3' },
];
return (
<DragDropContext>
<Droppable droppableId="card-list">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{tasks.map((task, index) => (
<Draggable key={task.id} draggableId={task.id} index={index}>
{(provided) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
{task.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
export default CardList;
위의 코드에서는 CardList라는 컴포넌트를 생성하고, tasks라는 배열에 카드의 정보를 저장합니다. 그리고 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 드래그 앤 드롭을 구현합니다.
예시 결과
마무리
이번 포스트에서는 Beautiful Dnd 라이브러리를 사용하여 JavaScript로 드래그 앤 드롭으로 카드를 만드는 방법에 대해 알아보았습니다. Beautiful Dnd는 쉽게 사용할 수 있는 라이브러리로, React 프로젝트에서 더 나은 사용자 경험을 구현하는 데 도움을 줄 수 있습니다. 보다 자세한 내용은 공식 문서에서 확인하실 수 있습니다.