1. React-Beautiful-Dnd

ㄱ. 설치

• npm install react-beautiful-dnd

ㄴ. DragDropContext

• DragDropContext: 드래그 앤 드롭을 전역적으로 관리하는 컨텍스트이고, onDragEnd 콜백을 전달하여 드래그가 끝났을 때의 로직을 처리할 수 있음.
• DragDropContext컴포넌트를 사용해서 드래그 앤 드롭 컨텏트를 설정함

ㄷ.Droppable

• Droppable은 DragDropContext의 하위 컴포넌트로 드래그 앤 드롭이 가능한 영역을 나타냄
• droppableId는 해당 영역의 유니크한 식별자임

ㄹ.Draggable

• Draggable은 실제 드래그가 가능한 아이템을 나타내고 Droppable안에 있어야함
• draggableId는 아이템의 유니크한 식별자이며, index는 아이템의 순서를 나타냄.