[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 삭제 가능성 제한하기

21 Nov 2023

javascript

Beautiful Dnd는 React에서 사용되는 드래그 앤 드롭(이하 Dnd) 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 원하는 요소를 화면에서 끌어서 다른 위치로 이동시킬 수 있습니다. 하지만, 모든 요소를 자유롭게 삭제할 수 있다면 실수로 중요한 내용을 삭제할 수도 있습니다. 이러한 상황을 방지하기 위해 이번 포스트에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소를 삭제하는 것을 제한하는 방법을 알아보겠습니다.

설치 및 설정

Beautiful Dnd는 React 프로젝트에서 사용되므로 관련 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 아래 명령어를 실행하여 필요한 패키지를 설치합니다.

npm install react-beautiful-dnd

패키지 설치가 완료되면, React 컴포넌트에서 Beautiful Dnd를 사용할 수 있도록 설정해야 합니다. react-beautiful-dnd 패키지에서 제공하는 DragDropContext 컴포넌트를 사용하여 컴포넌트를 감싸면 됩니다.

import { DragDropContext } from 'react-beautiful-dnd';

function App() {
  // ...
}

export default DragDropContext(App);

요소 삭제 기능 제한하기

Beautiful Dnd에서는 onBeforeDragStart 메서드를 사용하여 요소를 드래그하기 전에 추가 작업을 수행할 수 있습니다. 이 메서드를 사용하여 요소가 삭제 가능한지 여부를 결정하고, 삭제 불가능한 경우 요소를 드래그하지 못하도록 처리할 수 있습니다.

import { DragDropContext } from 'react-beautiful-dnd';

function App() {
  const onBeforeDragStart = (start) => {
    const { draggableId } = start;

    // 삭제 불가능한 요소일 경우 드래그를 막음
    if (draggableId === 'deleteNotAllowed') {
      return false;
    }

    return true;
  };

  const onDragEnd = (result) => {
    // 드래그가 끝났을 때의 동작 정의
  };

  return (
    <DragDropContext onBeforeDragStart={onBeforeDragStart} onDragEnd={onDragEnd}>
      {/* 요소들을 드래그 앤 드롭 가능한 컨테이너에 포함시킴 */}
    </DragDropContext>
  );
}

export default DragDropContext(App);

위의 예제에서 onBeforeDragStart 메서드에서는 draggableId를 확인하여 삭제 불가능한 요소인지 판단하고, 삭제 불가능한 경우 false를 반환하여 드래그를 막습니다.

요소 삭제 기능 제한에 대한 알림 추가하기

경고 메시지를 사용하여 사용자에게 삭제 불가능한 요소의 드래그를 막았다는 것을 알릴 수도 있습니다. 이를 위해 onBeforeDragStart 메서드에서 경고 메시지를 표시하고, false를 반환하여 드래그를 막습니다.

import { DragDropContext } from 'react-beautiful-dnd';

function App() {
  const onBeforeDragStart = (start) => {
    const { draggableId } = start;

    // 삭제 불가능한 요소일 경우 드래그를 막음
    if (draggableId === 'deleteNotAllowed') {
      alert('이 요소는 삭제할 수 없습니다.');
      return false;
    }

    return true;
  };

  const onDragEnd = (result) => {
    // 드래그가 끝났을 때의 동작 정의
  };

  return (
    <DragDropContext onBeforeDragStart={onBeforeDragStart} onDragEnd={onDragEnd}>
      {/* 요소들을 드래그 앤 드롭 가능한 컨테이너에 포함시킴 */}
    </DragDropContext>
  );
}

export default DragDropContext(App);

위의 예제에서는 onBeforeDragStart 메서드에서 삭제 불가능한 요소의 드래그를 막는 이벤트가 발생하면, alert을 사용하여 경고 메시지를 표시합니다.

이렇게 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 삭제 가능성을 제한할 수 있습니다. 사용자가 실수로 중요한 내용을 삭제하는 것을 방지하여 원활한 애플리케이션 사용 경험을 제공할 수 있습니다.

참고: React Beautiful Dnd 공식 문서