React로 드래그 앤 드롭 구현

핵심 개념

HTML5 Drag API와 React 이벤트로 드래그 앤 드롭을 구현합니다. onDragStart, onDragOver, onDrop 이벤트를 조합합니다. useState로 드래그 중인 아이템과 목록 순서를 관리합니다. 드래그 이벤트를 지우며 인터랙션이 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (34줄)







const { useState } = React;

  function DragList() {
    const [items, setItems] = useState(['T-800','T-1000','T-X','T-600']);
    const dragItem = React.useRef(null);

    const onDragStart = (i) => { dragItem.current = i; };
    const onDrop = (i) => {
      const copy = [...items];
      const dragged = copy.splice(dragItem.current, 1)[0];
      copy.splice(i, 0, dragged);
      setItems(copy);
    };

    return (
      <div>
        <div style={{color:'#555', fontSize:'11px', marginBottom:'8px'}}>드래그로 순서 변경</div>
        {items.map((item, i) => (
          <div key={item} draggable onDragStart={() => onDragStart(i)} onDragOver={e => e.preventDefault()} onDrop={() => onDrop(i)}
            style={{color:'#10b981', border:'1px solid #1a1a1a', padding:'8px', marginBottom:'4px', cursor:'grab', background:'#0a0a0a'}}>
            ⠿ {item}
          </div>
        ))}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<DragList />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '드래그 앤 드롭' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'드래그 앤 드롭'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '드래그 앤 드롭' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '드래그 앤 드롭' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

React로 드래그 앤 드롭 구현은 이 3가지만 확실히 잡으세요

1.순서 변경을 버튼 클릭으로만 처리하면 직관성이 떨어져서 사용자가 원하는 순서를 빠르게 만들 수 없습니다

2.onDragStart에서 출발 인덱스를 저장하고, onDrop에서 도착 인덱스와 비교해서 배열을 재정렬하는 것이 핵심입니다

3.다음 챕터에서 실시간 메시지를 주고받는 채팅 UI를 구현합니다

💬 이 챕터 질문 보기

REACT · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 34

← 커리큘럼으로 ← 목록으로 (React)