[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 메등병 명단 만들기

21 Nov 2023

javascript

Beautiful Dnd 라이브러리는 React 에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있는 도구입니다. 이를 사용하여 간단한 메등병 명단을 만들어보겠습니다.

준비물

React 프로젝트
Beautiful Dnd 설치

설치 및 설정

먼저, React 프로젝트가 준비되어 있어야 합니다. 프로젝트 폴더로 이동한 후, 다음 명령어를 사용하여 Beautiful Dnd 라이브러리를 설치합니다:

npm install react-beautiful-dnd

설치가 완료되면, 해당 라이브러리를 사용하기 위해 App.js 파일에서 다음과 같이 import합니다:

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

명단 데이터 준비

드래그 앤 드롭으로 변경 가능한 메등병 명단을 만들기 위해, 미리 배열 형태로 데이터를 준비해야 합니다. 예를 들어, 다음과 같이 몇 명의 메등병 정보를 포함한 배열을 생성합니다:

const soldiers = [
  { id: 'soldier1', name: '김철수' },
  { id: 'soldier2', name: '이영희' },
  { id: 'soldier3', name: '박민수' },
  { id: 'soldier4', name: '최지영' }
];

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

이제, 명단 데이터를 기반으로 드래그 앤 드롭 컴포넌트를 생성해보겠습니다. App.js 파일에서 다음과 같이 컴포넌트를 작성합니다:

function App() {
  const [soldiersList, setSoldiersList] = useState(soldiers);

  const handleDragEnd = (result) => {
    if (!result.destination) return;

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

    setSoldiersList(items);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="soldiers">
        {(provided) => (
          <ul className="soldiers-list" {...provided.droppableProps} ref={provided.innerRef}>
            {soldiersList.map((soldier, index) => (
              <Draggable key={soldier.id} draggableId={soldier.id} index={index}>
                {(provided) => (
                  <li
                    className="soldier"
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {soldier.name}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
}

위의 코드에서, handleDragEnd 함수는 드래그 앤 드롭 동작이 완료되었을 때 실행되는 콜백 함수입니다. 이 함수를 통해 명단 데이터의 순서를 변경하고, 변경된 데이터를 상태로 업데이트합니다.

스타일링

마지막으로, 명단 컴포넌트를 스타일링해보겠습니다. CSS 파일에 다음과 같은 스타일을 추가합니다:

.soldiers-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.soldier {
  background-color: #e5e5e5;
  padding: 10px;
  margin-bottom: 5px;
}

위의 코드는 명단을 리스트 형태로 보여주고, 각 항목에 배경색과 여백을 추가하는 스타일입니다.

마무리

이제, Beautiful Dnd를 사용하여 드래그 앤 드롭으로 메등병 명단을 만들었습니다. 이제 React 애플리케이션을 실행하고, 명단 항목을 드래그하여 순서를 변경해 보세요.