[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소 열기/닫기 구현하기

21 Nov 2023

javascript

이번 튜토리얼에서는 Beautiful Dnd 라이브러리를 사용하여 웹 페이지에서 요소를 드래그 앤 드롭으로 열고 닫을 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다.

Beautiful Dnd란?

Beautiful Dnd는 React를 기반으로 한 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 요소를 쉽게 드래그해서 이동하거나 재정렬할 수 있습니다.

예제 설명

이 예제에서는 Beautiful Dnd를 사용하여 요소들을 드래그 앤 드롭으로 열고 닫을 수 있는 기능을 구현합니다. 각 요소는 제목과 내용으로 구성되어있으며, 제목을 클릭하면 해당 요소의 내용이 펼쳐지거나 닫힙니다.

예제 코드

먼저 React와 Beautiful Dnd를 설치해야 합니다. 아래 명령어를 사용하여 설치할 수 있습니다.

npm install react-beautiful-dnd

다음으로, 필요한 컴포넌트와 스타일을 정의합니다. 아래는 예제 코드의 일부분입니다.

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

const Item = ({ item, index }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <Draggable draggableId={item.id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className="item"
        >
          <div className="item-header" onClick={handleToggle}>
            <h3>{item.title}</h3>
            <span>{isOpen ? '-' : '+'}</span>
          </div>
          {isOpen && <div className="item-content">{item.content}</div>}
        </div>
      )}
    </Draggable>
  );
}

const App = () => {
  const items = [
    { id: '1', title: 'Item 1', content: 'Lorem ipsum dolor sit amet.' },
    { id: '2', title: 'Item 2', content: 'Consectetur adipiscing elit.' },
    { id: '3', title: 'Item 3', content: 'Sed do eiusmod tempor incididunt.' },
  ];

  const onDragEnd = (result) => {
    // 드래그 앤 드롭 완료 시 실행될 함수
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="items">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Item item={item} index={index} key={item.id} />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

export default App;

위 코드에서 Item 컴포넌트는 각 요소를 나타내며, isOpen 상태를 사용하여 내용을 펼칠지 닫을지 여부를 관리합니다. handleToggle 함수는 제목을 클릭할 때마다 isOpen 상태를 토글합니다.

App 컴포넌트에서는 DragDropContext와 Droppable을 사용하여 드래그 앤 드롭을 활성화하고, Item 컴포넌트들을 렌더링합니다. onDragEnd 함수는 드래그 앤 드롭 동작이 완료될 때 호출됩니다.

마무리

Beautiful Dnd를 사용하여 드래그 앤 드롭으로 요소를 열고 닫는 기능을 구현하는 방법에 대해 알아보았습니다. 이 라이브러리를 사용하면 사용자들이 웹 페이지에서 쉽게 요소를 이동하고 재정렬할 수 있습니다.

더 많은 정보를 원하시면 Beautiful Dnd 공식 문서를 참고하세요.