[REACT] Drag and Drop - placeholder

학습일 : 2023. 04. 26

---

이번엔 draggable을 array로 구성해보고

placeholder를 적용해보고자 한다.

---

<App.tsx>

map함수를 써서 Draggable을 새로운 배열에 담아 반환해준다.
 {toDos.map((toDo, index) => (
                  <Draggable draggableId={toDo} index={index}>

index를 넘겨주고 index={index}를 작성해주고
draggableId 또한 toDo로 주도록 하겠다.

magic을 오른쪽 클릭해서 Type Definition을 확인해보면
placeholder 라는게 있는데,
이것은 droppable이 끝날 때 두는 무언가라서
사이즈가 이상하게 변하는걸 방지해준다.

Board 안 맨 밑에  {magic.placeholder} 를 추가해주면
리스트에서 어떤 것을 빼내더라도 리스트의 사이즈는 그대로 유지하면서
안에 있는 각각의 카드를 움직일 수 있게 된다.

const toDos = ["a", "b", "c", "d", "e", "f"];

function App() {
  const onDragEnd = () => {};
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Wrapper>
        <Boards>
          <Droppable droppableId="one">
            {(magic) => (
              <Board ref={magic.innerRef} {...magic.droppableProps}>
                {toDos.map((toDo, index) => (
                  <Draggable draggableId={toDo} index={index}>
                    {(magic) => (
                      <Card
                        ref={magic.innerRef}
                        {...magic.draggableProps}
                        {...magic.dragHandleProps}
                      >
                        {toDo}
                      </Card>
                    )}
                  </Draggable>
                ))}
                {magic.placeholder}
              </Board>
            )}
          </Droppable>
        </Boards>
      </Wrapper>
    </DragDropContext>
  );
}

export default App;

실행결과