[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 시계 만들기

21 Nov 2023

javascript

드래그 앤 드롭(Drag and drop)은 사용자가 마우스 또는 터치를 사용하여 요소를 선택하고 다른 위치로 이동하는 기능입니다. 이 기능은 사용자 인터페이스(UI)를 향상시키고 사용자 경험을 개선하는 데 매우 유용합니다. Beautiful Dnd는 React를 기반으로 한 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하여 시계를 만들어 보겠습니다.

Beautiful Dnd 설치

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

npm install react-beautiful-dnd

혹은, yarn을 사용하는 경우, 다음 명령어를 사용합니다.

yarn add react-beautiful-dnd

예제 코드

다음은 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 시계를 만드는 예제 코드입니다.

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

const Clock = () => {
  const [items, setItems] = useState([
    { id: "1", content: "12" },
    { id: "2", content: "3" },
    { id: "3", content: "6" },
    { id: "4", content: "9" },
  ]);

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

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

    setItems(itemsCopy);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="clock">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      userSelect: "none",
                      padding: 16,
                      margin: "0 0 8px 0",
                      backgroundColor: "#FFF",
                      border: "1px solid #DDD",
                      borderRadius: 4,
                      ...provided.draggableProps.style,
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default Clock;

이 예제 코드에서는 Clock 컴포넌트를 정의하고, items 상태를 사용하여 시계의 숫자들을 관리합니다. DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 드래그 앤 드롭 기능을 구현하고, onDragEnd 함수를 이용하여 숫자들의 순서를 변경합니다.

결과 확인

위의 예제를 사용하여 드래그 앤 드롭으로 시계를 만들고, React 애플리케이션에서 Clock 컴포넌트를 렌더링하면 시계를 볼 수 있습니다.

import React from "react";
import Clock from "./Clock";

const App = () => {
  return (
    <div>
      <h1>Drag and Drop Clock</h1>
      <Clock />
    </div>
  );
};

export default App;

결론

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 시계를 만들었습니다. 이 예제를 기반으로 원하는 모양과 동작을 가진 다른 드래그 앤 드롭 요소를 만들 수 있습니다. Beautiful Dnd의 자세한 사용 방법과 기능에 대해서는 공식 문서를 참고하십시오.