[javascript] Beautiful Dnd의 드래그 앤 드롭 형식 지정하기

21 Nov 2023

javascript

Beautiful Dnd는 React 기반의 드래그 앤 드롭 라이브러리로, 웹 애플리케이션에서 엘리먼트를 쉽게 드래그 앤 드롭할 수 있게 해줍니다. 이 라이브러리를 사용하면 사용자 친화적인 드래그 앤 드롭 인터페이스를 만들 수 있으며, 복잡한 드래그 앤 드롭 로직을 처리할 때도 간편하게 사용할 수 있습니다.

이번 포스트에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭 형식을 지정하는 방법을 다루겠습니다. 드래그 앤 드롭 형식이란, 드래그하는 엘리먼트와 드롭되는 엘리먼트 사이의 관계를 정의하는 것입니다.

Installation

먼저 Beautiful Dnd를 설치해야 합니다. 다음 명령어를 사용하여 패키지를 설치합니다.

npm install react-beautiful-dnd

사용법

Beautiful Dnd의 기본적인 사용법은 다음과 같습니다.

컴포넌트를 DragDropContext로 감싸줍니다.
드래그 가능한 엘리먼트를 Draggable로 감싸고, 드롭 가능한 영역을 Droppable로 감싸줍니다.
Draggable과 Droppable의 속성을 설정하여 드래그 앤 드롭 형식을 지정합니다.

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

const App = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const onDragEnd = (result) => {
    // 드롭 완료 후 실행할 로직 작성
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
          >
            {items.map((item, index) => (
              <Draggable
                key={index}
                draggableId={`draggable-${index}`}
                index={index}
              >
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

위 코드에서는 DragDropContext로 App 컴포넌트 전체를 감싸주고, Droppable로 드롭 가능한 영역을 감싸주었습니다. Draggable로 각각의 드래그 가능한 엘리먼트를 감싸주고, draggableId와 index 등의 속성을 설정하여 드래그 앤 드롭 형식을 지정하였습니다.

Conclusion

이번 포스트에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭 형식을 지정하는 방법을 알아보았습니다. Beautiful Dnd는 간편하게 사용할 수 있으며, 드래그 앤 드롭 기능을 구현할 때 매우 유용한 라이브러리입니다. 추가적인 사용법이나 자세한 내용은 공식 문서를 참고하시기 바랍니다.