Beautiful DnD는 React를 기반으로 한 강력한 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 드래그 앤 드롭 인터페이스를 구현할 수 있습니다. 이번에는 Beautiful DnD에 애니메이션 효과를 추가해보겠습니다.
설치
먼저 Beautiful DnD를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치합니다:
npm install react-beautiful-dnd
애니메이션 효과 추가하기
Beautiful DnD는 자체적으로 애니메이션 효과를 제공하지 않기 때문에, 우리는 CSS를 사용하여 애니메이션을 추가해야 합니다. 다음은 Beautiful DnD에서 사용할 수 있는 몇 가지 중요한 CSS 클래스입니다:
react-beautiful-dnd-draggable
: 드래그 가능한 요소에 적용되는 클래스입니다.react-beautiful-dnd-dragging
: 현재 드래그 중인 요소에 적용되는 클래스입니다.react-beautiful-dnd-dragging-over
: 드롭 대상 요소 위에 있는 경우에만 적용되는 클래스입니다.react-beautiful-dnd-drag-handle
: 드래그 핸들에 적용되는 클래스입니다.
이러한 클래스를 사용하여 드래그 앤 드롭 요소에 애니메이션 효과를 적용할 수 있습니다. 예를 들어, 다음과 같이 CSS를 작성할 수 있습니다:
.react-beautiful-dnd-draggable {
transition: transform 0.2s;
}
.react-beautiful-dnd-dragging {
transform: scale(1.05);
transition: transform 0.2s;
}
.react-beautiful-dnd-dragging-over {
background-color: lightblue;
}
.react-beautiful-dnd-drag-handle {
cursor: grab;
}
위의 CSS 코드는 드래그 가능한 요소가 드래그될 때 약간 확대되는 애니메이션 효과를 적용하고, 드롭 대상 위에 있는 경우 배경색이 라이트 블루로 변경되도록 만듭니다. 또한 드래그 핸들에는 grab
커서가 적용됩니다.
예시
다음은 Beautiful DnD에 애니메이션 효과를 추가한 예시 코드입니다:
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const items = ['Item 1', 'Item 2', 'Item 3'];
const App = () => {
const handleDragEnd = (result) => {
// 드래그 앤 드롭 완료 후 발생하는 이벤트 처리 로직
};
return (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<ul {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable key={item} draggableId={item} index={index}>
{(provided, snapshot) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={snapshot.isDragging ? 'react-beautiful-dnd-dragging' : ''}
>
{item}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
};
export default App;
위의 예시 코드에서는 DragDropContext
, Droppable
, Draggable
컴포넌트를 사용하여 Beautiful DnD 인터페이스를 만듭니다. handleDragEnd
함수는 드래그 앤 드롭이 완료된 후 호출되는 이벤트 처리 로직을 담당합니다. CSS 클래스를 사용하여 애니메이션 효과를 적용한 부분은 <li>
요소의 className
속성에 추가되었습니다.
이제 Beautiful DnD에 애니메이션 효과를 추가하는 방법을 알게 되었습니다. 여러분의 프로젝트에 적용하여 부드러운 드래그 앤 드롭 인터페이스를 만들어보세요!
참고 문서: Beautiful DnD 공식 문서