[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭 이벤트 전파하기

21 Nov 2023

javascript

Beautiful Dnd는 React를 기반으로한 JavaScript 라이브러리로, 사용자 인터페이스에서 간편하게 드래그 앤 드롭 이벤트를 구현할 수 있게 해줍니다. 이번 글에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭 이벤트를 부모 컴포넌트로 전파하는 방법에 대해 알아보겠습니다.

Beautiful Dnd 설치하기

Beautiful Dnd를 사용하기 위해, 먼저 프로젝트에 패키지를 설치해야 합니다.

npm install react-beautiful-dnd

드래그 앤 드롭 컴포넌트 생성하기

Beautiful Dnd를 사용하여 드래그 앤 드롭 이벤트를 구현하기 위해, DragDropContext와 Droppable 컴포넌트를 사용합니다. 또한, 드래그 가능한 요소를 만들기 위해 Draggable 컴포넌트도 사용합니다.

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

class MyComponent extends React.Component {
  state = {
    items: [
      { id: 'item1', content: 'Item 1' },
      { id: 'item2', content: 'Item 2' },
      { id: 'item3', content: 'Item 3' }
    ]
  };

  onDragEnd = (result) => {
    // 드래그 앤 드롭 이벤트 처리
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div ref={provided.innerRef}>
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default MyComponent;

이벤트 전파하기

드래그 앤 드롭 이벤트를 부모 컴포넌트로 전파하기 위해서는, DragDropContext 컴포넌트의 onDragEnd 속성에 이벤트 처리 함수를 정의해야 합니다.

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

class MyComponent extends React.Component {
  state = {
    items: [
      { id: 'item1', content: 'Item 1' },
      { id: 'item2', content: 'Item 2' },
      { id: 'item3', content: 'Item 3' }
    ]
  };

  onDragEnd = (result) => {
    // 드래그 앤 드롭 이벤트 처리
    // 부모 컴포넌트로 이벤트를 전파하거나 상태를 업데이트할 수 있습니다.
    console.log('드롭 완료');
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div ref={provided.innerRef}>
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default MyComponent;

위 예제에서는 드래그 앤 드롭이 완료될 때 console.log를 사용하여 콘솔에 메시지를 출력하도록 했습니다. 이 곳에 실제로 부모 컴포넌트로 이벤트를 전파하거나 상태를 업데이트하는 로직을 추가할 수 있습니다.

결론

Beautiful Dnd를 사용하여 드래그 앤 드롭 이벤트를 부모 컴포넌트로 전파하는 방법에 대해 알아보았습니다. 이로써 사용자 인터페이스에 드래그 앤 드롭 기능을 간단하게 추가할 수 있게 되었습니다.

더 자세한 정보 및 예제 코드는 React Beautiful Dnd 공식 문서를 참고해주세요.