#7.2 Drag and Drop part One #7.3 Drag and Drop part Two

npm i react-beautiful-dnd

import DragDropContext (required prop => onDragEnd)
Droppable => the area that we will drop things & required prop => droppableId & the children of this should be a function not just react elemnet
Draggable => the thing that we can drag & required prop => draggableId & Index(is for sorting)

dragHandleProps 속성은 드래그하고 움직일 때 어딜 선택해야 드래그가 되는지 설정해주는 속성

import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";

function App() {
  const onDragEnd = () => { }
  return <DragDropContext onDragEnd={onDragEnd}>
    <div>
      <Droppable droppableId="one">
        {(magic) =>
          <ul ref={magic.innerRef} {...magic.droppableProps}>
            <Draggable draggableId="first" index={0} >
              {(magic) => (<li
                ref={magic.innerRef}
                {...magic.draggableProps}
              >
                <span {...magic.dragHandleProps}>❤️</span>
                One
              </li>)}
            </Draggable>
            <Draggable draggableId="second" index={1} >
              {(magic) => (<li
                ref={magic.innerRef}
                {...magic.draggableProps}>
                <span {...magic.dragHandleProps}>❤️</span>
                Two
              </li>)}
            </Draggable>
          </ul>}
      </Droppable>
    </div>
  </DragDropContext >
}
export default App;