Beautiful Dnd는 React에서 많이 사용되는 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 요소를 드래그하여 원하는 위치로 놓을 수 있도록 할 수 있습니다.
이번 예제에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소의 색상을 변경하는 방법을 알아보겠습니다.
설치
먼저 Beautiful Dnd를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 패키지를 설치합니다.
npm install react-beautiful-dnd
사용법
-
DragDropContext컴포넌트를 사용하여 드래그 앤 드롭 가능한 영역을 생성합니다. 이 컴포넌트는onDragEnd콜백 함수를 전달받습니다. -
Droppable컴포넌트를 사용하여 드롭 가능한 영역을 지정합니다. 이 컴포넌트는droppableId를 가져야 하며, 드롭 가능한 요소를 감싸야 합니다. -
Draggable컴포넌트를 사용하여 드래그 가능한 요소를 생성합니다. 이 컴포넌트는draggableId를 가져야 하며, 드래그 가능한 영역 안에 위치해야 합니다. -
onDragEnd콜백 함수를 구현하여 드래그 앤 드롭이 완료되었을 때 처리할 로직을 작성합니다. 이 콜백 함수는source와destination매개변수를 받으며, 이를 통해 드래그한 요소의 출발지와 도착지를 확인할 수 있습니다.
예제 코드
다음은 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소의 색상을 변경하는 예제 코드입니다.
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const ColorChanger = () => {
const [colors, setColors] = useState(['red', 'green', 'blue']);
const onDragEnd = (result) => {
if (!result.destination) {
return;
}
const { source, destination } = result;
const newColors = [...colors];
// 드래그한 요소의 위치 변경
const [removed] = newColors.splice(source.index, 1);
newColors.splice(destination.index, 0, removed);
setColors(newColors);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="colors">
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{colors.map((color, index) => (
<Draggable key={color} draggableId={color} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
backgroundColor: color,
width: '100px',
height: '100px',
margin: '8px',
}}
></div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
export default ColorChanger;
위의 코드를 참고하여 자신의 프로젝트에 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소의 색상을 변경해 보세요.