[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭을 통한 상태 관리하기

21 Nov 2023

javascript

드래그 앤 드롭 기능은 사용자에게 직관적이고 유연한 상호작용을 제공하는 데 도움이 됩니다. 이를 구현하기 위해 Beautiful Dnd 라이브러리를 사용할 수 있습니다.

Beautiful Dnd는 React 기반으로 작성된 라이브러리로, React 컴포넌트를 사용하여 드래그 앤 드롭 기능을 손쉽게 구현할 수 있습니다.

Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install react-beautiful-dnd

Beautiful Dnd 사용하기

드래그 앤 드롭 기능을 구현하기 위해 몇 가지 단계를 따라야 합니다.

1. DragDropContext 설정하기

먼저, 앱의 최상위 컴포넌트에서 DragDropContext 컴포넌트를 사용하여 드래그 앤 드롭 컨텍스트를 설정해야 합니다.

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

class App extends React.Component {
  onDragEnd = (result) => {
    // 드래그 앤 드롭 종료 시 실행되는 함수
  };

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

2. 드래그 앤 드롭 가능한 컴포넌트 생성하기

드래그 앤 드롭 가능한 컴포넌트는 Droppable과 Draggable 컴포넌트를 사용하여 생성할 수 있습니다. Droppable은 드롭 영역을 정의하고, Draggable은 드래그 가능한 항목을 정의합니다.

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

class MyComponent extends React.Component {
  render() {
    return (
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {/* 드래그 앤 드롭 가능한 항목들 */}
          </div>
        )}
      </Droppable>
    );
  }
}

3. 드래그 앤 드롭 항목 순서 변경하기

컴포넌트 내에서 항목의 순서를 변경하기 위해 onDragEnd 콜백 함수를 사용해야 합니다. 이 함수는 드래그 앤 드롭이 종료될 때 호출됩니다.

onDragEnd = (result) => {
  const { destination, source } = result;

  if (!destination) {
    return;
  }

  // 상태 업데이트 로직
};

4. 드래그 앤 드롭 상태 업데이트하기

onDragEnd 함수 내에서 드래그 앤 드롭이 종료된 후, 새로운 상태를 업데이트해야 합니다. 이를 위해 React의 상태 관리 기능 (예: setState) 또는 다른 상태 관리 라이브러리를 사용할 수 있습니다.

onDragEnd = (result) => {
  const { destination, source } = result;

  if (!destination) {
    return;
  }

  const items = [...this.state.items];
  const [removed] = items.splice(source.index, 1);
  items.splice(destination.index, 0, removed);

  this.setState({ items });
};

마무리

Beautiful Dnd를 사용하여 드래그 앤 드롭을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자에게 더 나은 상호작용 경험을 제공할 수 있습니다. Beautiful Dnd의 자세한 사용법은 공식 문서를 참고하시기 바랍니다.

참고 문서: react-beautiful-dnd 공식 문서