[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 드래그 시 강조 효과 주기

21 Nov 2023

javascript

드래그 앤 드롭(Drag and Drop)은 사용자가 요소를 마우스로 클릭하여 드래그하고 원하는 위치로 드롭하여 요소의 위치를 변경하는 UI 패턴입니다. Beautiful Dnd는 React를 기반으로한 모든 플랫폼에서 사용할 수 있는 강력한 드래그 앤 드롭 라이브러리입니다.

Beautiful Dnd를 사용하면 요소를 드래그할 때 강조 효과를 추가할 수 있습니다. 사용자가 요소를 드래그하면 스타일을 변경하여 요소를 강조 표시할 수 있습니다. 아래는 Beautiful Dnd를 사용하여 드래그 앤 드롭 시 강조 효과를 주는 예제입니다.

1. 패키지 설치

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

npm install react-beautiful-dnd

2. 드래그 앤 드롭 컴포넌트 생성

Beautiful Dnd를 사용하기 위해 드래그 앤 드롭을 할 컴포넌트를 생성해야 합니다. 아래는 간단한 드래그 앤 드롭 컴포넌트의 예입니다.

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

const data = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
];

const App = () => {
  const handleDragEnd = (result) => {
    // 드래그 앤 드롭 종료시 호출되는 콜백 함수
    // 위치 변경 로직을 작성할 수 있습니다.
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {data.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      background: snapshot.isDragging ? 'yellow' : 'white',
                      ...provided.draggableProps.style
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

3. 강조 효과 적용하기

위의 예제에서 style 속성을 사용하여 드래그할 때 배경색을 변경하여 요소를 강조합니다. snapshot.isDragging 프로퍼티는 요소가 드래그 중인지 여부를 나타냅니다. 드래그 중이면 배경색을 노란색으로 변경하고, 드래그 중이 아니면 배경색을 흰색으로 유지합니다.

추가적으로 컴포넌트에서 onDragEnd 콜백 함수를 정의하여 드래그 앤 드롭이 종료될 때 호출되는 로직을 작성할 수 있습니다. 이 콜백 함수를 사용하면 위치 변경과 관련된 작업을 수행할 수 있습니다.

4. 결과 확인하기

위의 예제를 실행하면 세 개의 아이템이 있는 드래그 앤 드롭 리스트가 생성됩니다. 아이템을 클릭하여 드래그한 후 원하는 위치로 드롭하면 아이템이 위치가 변경되는 것을 확인할 수 있습니다. 드래그 중인 아이템은 노란색으로 강조되며, 드롭 완료 후에는 배경색이 흰색으로 되돌아갑니다.

이제 Beautiful Dnd를 사용하여 드래그 앤 드롭 시 강조 효과를 추가하는 방법을 알게 되었습니다. 이 라이브러리는 다양한 기능과 설정을 제공하므로 자세한 내용은 Beautiful Dnd 공식 문서를 참조하시기 바랍니다.

참고 자료:

Beautiful Dnd 공식 문서