React DnD는 컴포넌트를 분리 된 상태로 유지하면서 복잡한 드래그 앤 드롭 인터페이스를 구축하는 데 도움이 되는 React 유틸리티 세트입니다.

드래그 하면 응용 프로그램의 여러 부분간에 데이터가 전송되고 구성 요소가 드래그 앤 드롭 이벤트에 따라 모양과 응용 프로그램 상태가 변경되는 Trello 및 Storify와 같은 앱에 적합합니다.

http://react-dnd.github.io/react-dnd 

설치 

# Using new-hotness ESModules
yarn add react-dnd react-dnd-html5-backend

# Using legacy, node-friendly CommonJS
yarn add react-dnd-cjs react-dnd-html5-backend-cjs

두 번째 패키지는 React DnD에서 HTML5 드래그 앤 드롭 API를 후드 아래에 허용합니다. 터치 백엔드와 같은 타사 백엔드를 대신 사용할 수도 있습니다.

그것은 어떻게 생겼습니까? 

// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag({
    item: { type: ItemTypes.CARD, text },
    collect: monitor => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  })
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}