[javascript] Beautiful Dnd의 카스텀 드래그 핸들 구현하기

21 Nov 2023

javascript

Beautiful Dnd은 리액트 애플리케이션에서 드래그 앤 드롭 기능을 구현하기 위한 강력한 라이브러리입니다. 이 라이브러리를 사용하면 간단하게 리스트나 그리드 같은 요소를 드래그하여 재배치할 수 있습니다.

이번 블로그에서는 Beautiful Dnd를 사용하여 카스텀 드래그 핸들을 구현하는 방법에 대해 알아보겠습니다.

사용 방법

먼저, Beautiful Dnd를 설치합니다.

npm install react-beautiful-dnd

그런 다음, 애플리케이션에서 Beautiful Dnd를 가져옵니다.

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

Beautiful Dnd에서는 드래그 가능한 요소(Draggable)와 드롭 가능한 영역(Droppable)으로 구성됩니다. 이를 활용하여 카스텀 드래그 핸들을 구현할 수 있습니다.

먼저, Draggable 컴포넌트를 사용하여 드래그 가능한 요소를 생성합니다. 이 때, Draggable 컴포넌트의 draggableId 속성은 유일한 식별자로 사용됩니다.

<Draggable draggableId="item-1" index={0}>
  {(provided, snapshot) => (
    <div
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      ref={provided.innerRef}
    >
      {/* 드래그 핸들을 구현하는 코드 */}
    </div>
  )}
</Draggable>

드래그 핸들을 구현하기 위해 div 요소 내부에 원하는 UI를 작성할 수 있습니다. 그리고 provided.draggableProps와 provided.dragHandleProps를 해당 요소에 전달해야 합니다.

Droppable 컴포넌트는 드롭 가능한 영역을 생성합니다. 여러 Draggable 컴포넌트를 감싸서 이 영역에 드롭할 수 있는 구조를 만들 수 있습니다.

<Droppable droppableId="droppable-area">
  {(provided, snapshot) => (
    <div
      {...provided.droppableProps}
      ref={provided.innerRef}
    >
      {items.map((item, index) => (
        <Draggable draggableId={item.id} index={index} key={item.id}>
          {(provided, snapshot) => (
            <div
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              ref={provided.innerRef}
            >
              {/* 드래그 핸들을 구현하는 코드 */}
            </div>
          )}
        </Draggable>
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

위의 예시에서는 배열 items에 있는 각 아이템을 Draggable 컴포넌트로 렌더링하고 있습니다.

위와 같이 Beautiful Dnd를 사용하여 카스텀 드래그 핸들을 구현할 수 있습니다. 자세한 내용은 Beautiful Dnd의 공식 문서를 참조하시기 바랍니다.