[javascript] Beautiful Dnd의 사용 방법

21 Nov 2023

javascript

Beautiful DND는 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는데 사용되는 라이브러리입니다. 이 라이브러리를 사용하면 사용자 친화적인 인터페이스를 만들 수 있으며, 다양한 컴포넌트를 드래그 앤 드롭할 수 있습니다.

설치

Beautiful DND를 사용하려면 먼저 패키지를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행하세요:

npm install react-beautiful-dnd

사용 방법

Beautiful DND를 사용하기 위해 다음의 단계를 따르세요:

Beautiful DND 패키지를 import하세요:

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

드래그 앤 드롭할 컴포넌트를 생성하세요. 드롭 영역을 만들기 위해 Droppable 컴포넌트를 사용하고, 드래그 가능한 요소를 만들기 위해 Draggable 컴포넌트를 사용합니다:

<DragDropContext>
  <Droppable droppableId="droppable">
    {(provided, snapshot) => (
      <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}>
        {items.map((item, index) => (
          <Draggable key={item.id} draggableId={item.id} index={index}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                style={getItemStyle(
                  snapshot.isDragging,
                  provided.draggableProps.style
                )}
              >
                {item.content}
              </div>
            )}
          </Draggable>
        ))}
        {provided.placeholder}
      </div>
    )}
  </Droppable>
</DragDropContext>

dragDropContext 이벤트 핸들러를 생성하세요. 이 핸들러는 드래그 앤 드롭 동작을 처리합니다:

onDragEnd = (result) => {
  // 동작 처리
};

DragDropContext 컴포넌트의 onDragEnd 속성에 이벤트 핸들러를 전달하세요:

<DragDropContext onDragEnd={this.onDragEnd}>
  {/* 내용 */}
</DragDropContext>

마무리

Beautiful DND를 사용하여 React 애플리케이션에 드래그 앤 드롭 기능을 추가할 수 있습니다. 위의 단계를 따라서 사용 방법을 익히고, 다양한 컴포넌트를 드래그 앤 드롭할 수 있는 인터페이스를 만들어보세요.

더 자세한 정보는 공식 문서를 참조하세요.