Beautiful Dnd는 React에서 제공하는 드래그 앤 드롭 라이브러리입니다. 하지만 때로는 드래그 앤 드롭 기능을 사용하지 않아야 할 때가 있습니다. 이 글에서는 Beautiful Dnd의 드래그 앤 드롭 기능을 비활성화하는 방법에 대해 알아보겠습니다.

1. 패키지 설치하기

Beautiful Dnd를 사용하기 위해 먼저 패키지를 설치해야 합니다. 터미널에서 다음 명령을 실행하여 Beautiful Dnd 패키지를 설치합니다.

npm install react-beautiful-dnd

2. 드래그 앤 드롭 기능 비활성화하기

드래그 앤 드롭 기능을 비활성화하기 위해 Beautiful Dnd에서 제공하는 DragDropContext 컴포넌트를 사용합니다. 이 컴포넌트를 사용하면 드래그 앤 드롭 동작을 제어할 수 있습니다.

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

class App extends React.Component {
  // 드래그 앤 드롭 동작을 제어하는 함수
  onDragEnd = result => {
    // 기본 동작을 막기 위해 아무런 작업도 수행하지 않습니다.
  }

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        {/* 드래그 앤 드롭이 필요한 컴포넌트들이 위치하는 부분 */}
      </DragDropContext>
    );
  }
}

export default App;

위 코드에서 onDragEnd 함수는 드래그 앤 드롭 동작이 종료되었을 때 호출되는 콜백 함수입니다. 여기서는 아무런 작업을 수행하지 않도록 설정했습니다. 이렇게 하면 드래그 앤 드롭 동작이 비활성화됩니다.

마무리

Beautiful Dnd를 사용하여 드래그 앤 드롭 기능을 비활성화하는 방법을 알아보았습니다. 이를 활용하여 드래그 앤 드롭이 필요하지 않은 부분에서 해당 기능을 제어할 수 있습니다. Beautiful Dnd의 공식 문서를 참고하여 더 다양한 기능과 사용법을 익히시기를 권장합니다.

참고 자료

• Beautiful Dnd 공식 문서