React에서 드래그 앤 드롭 기능을 구현하는 방법은 무엇인가요?

Q1: React에서 드래그 앤 드롭 기능을 구현하려면 어떤 기본 HTML 속성을 사용하나요?
A1: React에서 기본 드래그 앤 드롭을 구현할 때는 HTML5 Drag and Drop API를 사용합니다. 주요 속성으로는 `draggable={true}`를 요소에 지정하고, 이벤트 핸들러로 `onDragStart`, `onDragOver`, `onDrop` 등을 사용합니다.

---

Q2: 간단한 드래그 앤 드롭 구현 예시는 어떻게 되나요?
A2:
```jsx
function DragDrop() {
const onDragStart = (e, id) => {
e.dataTransfer.setData('text/plain', id);
};

const onDrop = (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text');
alert(`Dropped item id: ${id}`);
};

const onDragOver = (e) => {
e.preventDefault(); // 반드시 호출해야 drop 가능
};

return (

);
}
```

---

Q3: 왜 `e.preventDefault()`를 `onDragOver`에서 호출해야 하나요?
A3: 기본적으로 브라우저는 드래그된 요소를 드롭할 수 없습니다. `onDragOver`에서 `e.preventDefault()`를 호출해야 해당 영역이 드롭 가능하도록 활성화됩니다.

---

Q4: 복잡한 드래그 앤 드롭 기능을 위해 추천되는 라이브러리가 있나요?
A4: 네, `react-dnd`와 `react-beautiful-dnd`가 대표적입니다.
- `react-dnd`: 유연한 API로 복잡한 드래그 앤 드롭 인터랙션 구현에 적합
- `react-beautiful-dnd`: 리스트 아이템 정렬이나 간단한 드래그앤드롭에 최적화된 라이브러리

---

Q5: `react-beautiful-dnd`를 사용해 간단한 리스트 정렬 구현은 어떻게 하나요?
A5: 설치 후, `DragDropContext`, `Droppable`, `Draggable` 컴포넌트를 사용합니다.
```jsx
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

function DndList() { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

const onDragEnd = (result) => {
if (!result.destination) return;
const reordered = Array.from(items);
const [removed] = reordered.splice(result.source.index, 1);
reordered.splice(result.destination.index, 0, removed);
setItems(reordered);
};

return (


{(provided) => (

{items.map((item, index) => (

{(provided) => (
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{ padding: 8, margin: '4px 0', backgroundColor: 'lightgray', ...provided.draggableProps.style }}
>
{item}

)}

))}
{provided.placeholder}