[ReactJS] React Beautiful DnD

react-beautiful-dnd: 드래그 앤 드롭이 가능하도록 하는 라이브러리.

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

전체 구조

return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div>
        <Droppable droppableId="one">
          {() => (
            <ul>
              <Draggable draggableId="first" index={0}>
                {() => <li>One</li>}
              </Draggable>
              <Draggable draggableId="second" index={1}>
                {() => <li>Two</li>}
              </Draggable>
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );

DragDropContext: 드래그&드롭이 가능한 공간
(onDragEnd: 유저가 드래그를 끝내면 호출하는 함수)
Droppable: 개체를 드롭할 수 있는 구역
Draggable: 드래그할 수 있는 개체

아래 그림에서
-파란 공간은 DragDropContext
-핀과 버블검 공주 상자는 Droppable
-이들의 명대사들이 Draggable

DragDropContext

const [toDos, setToDos] = useRecoilState(toDoState);
  const onDragEnd = ({ draggableId, destination, source }: DropResult) => {
    if (!destination) return;
    setToDos((oldToDos) => {
      const toDosCopy = [...oldToDos];
      // 개체 삭제
      toDosCopy.splice(source.index, 1);
      // 변경된 위치로 재생성
      toDosCopy.splice(destination?.index, 0, draggableId);
      return toDosCopy;
    });

onDragEnd가 필요하다. 설정하지 않으면 drop해도 상태로 돌아온다.
onDragEnd의 Argument는 드래그를 시작/종료한 박스(Droppable)와 개체(Draggable)의 위치를 알려준다.
만약 어떤 요소를 드롭해서 위치를 바꾸고 싶다면, 시작 위치에서는 삭제하고 종료 위치에 추가하면 된다.

Droppable

<Droppable droppableId="one">
          {(magic) => (
            <ul ref={magic.innerRef} {...magic.droppableProps}>
              <Draggable>
              </Draggable>
            </ul>
          )}
</Droppable>

안에 함수가 있어야 한다. id가 필요하다.
provided를 적용하면 drop이 가능해진다.
provided.innerRef
provided.droppableProps
provided.placeholder?: drop이 끝날 때까지 박스 크기 고정

Draggable

<Draggable draggableId="first" index={0}>
                {(magic) => (
                  <li ref={magic.innerRef} {...magic.draggableProps}>
                    <span {...magic.dragHandleProps}>잡고 움직일 것</span>
                    One
                  </li>
                )}
              </Draggable>

안에 함수가 있어야 한다. id와 index가 필요하다.
provided를 적용하면 drag가 가능해진다.
provided.innerRef
provided.draggableProps
provided.dragHandleProps: 드래그 가능한 범위 제한. optional이지만 핸들을 만들어줄 수 있다.