[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 테두리 스타일 변경하기

21 Nov 2023

javascript

많은 웹 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 것은 중요한 요소입니다. 그 중 Beautiful Dnd는 React에서 사용되는 드래그 앤 드롭 라이브러리로서, 특히 요소의 스타일을 변경하는 기능을 제공합니다. 이 글에서는 Beautiful Dnd를 사용하여 요소를 드래그 앤 드롭하여 테두리 스타일을 변경하는 방법을 알아보겠습니다.

Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 입력하여 설치하세요:

npm install react-beautiful-dnd

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

먼저, 드래그 앤 드롭을 구현할 컴포넌트를 생성해야 합니다. React 컴포넌트 라이프사이클 메서드를 활용하여 Beautiful Dnd에서 제공하는 API를 사용하여 드래그 앤 드롭 기능을 구현할 수 있습니다.

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

class DragAndDropComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 'item-1', content: '요소 1' },
        { id: 'item-2', content: '요소 2' },
        { id: 'item-3', content: '요소 3' },
      ],
    };
  }

  onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }

    const items = Array.from(this.state.items);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    this.setState({ items });
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              {...provided.droppableProps}
            >
              {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}
                      style={{
                        border: snapshot.isDragging ? '2px dashed #aaa' : 'none', 
                        padding: 16,
                        margin: '0 0 8px',
                        backgroundColor: snapshot.isDragging ? '#eee' : 'transparent',
                        ...provided.draggableProps.style
                      }}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default DragAndDropComponent;

테두리 스타일 변경하기

위의 코드에서는 style 객체를 사용하여 드래그 앤 드롭 중인 요소의 테두리 스타일을 변경할 수 있습니다. 드래그 중인지 여부에 따라 snapshot.isDragging을 확인하고, 테두리 스타일을 적용하면 됩니다.

위의 예시 코드에서는 드래그 중인 요소의 테두리를 2픽셀 점선으로 변경하고, 배경색을 옅은 회색으로 설정하였습니다. 필요에 따라 테두리 두께, 색상, 배경색 등을 자유롭게 변경할 수 있습니다.

마치며

Beautiful Dnd를 사용하면 React 애플리케이션에서 손쉽게 드래그 앤 드롭을 구현할 수 있습니다. 이를 활용하여 요소의 테두리 스타일을 변경하면 애플리케이션의 사용자 경험을 개선할 수 있습니다. 자세한 내용은 Beautiful Dnd 공식 문서를 참고하시기 바랍니다.