[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 단축키 지원하기

21 Nov 2023

javascript

이번 포스트에서는 Beautiful Dnd 라이브러리를 사용하여 드래그 앤 드롭 기능을 구현하고, 단축키를 지원하는 방법에 대해 알아보겠습니다.

Beautiful Dnd 소개

Beautiful Dnd는 리액트 기반의 드래그 앤 드롭 라이브러리입니다. 이 라이브러리를 사용하면 사용자 친화적인 인터페이스로 아이템을 드래그하여 재정렬하거나 이동시킬 수 있습니다.

드래그 앤 드롭 기능 구현하기

먼저 Beautiful Dnd를 설치하고 프로젝트에 통합해야 합니다. 다음 명령어를 사용하여 Beautiful Dnd를 설치합니다:

npm install react-beautiful-dnd

이제 드래그 앤 드롭 기능을 구현하기 위해 해당 라이브러리의 컴포넌트를 사용합니다. 예를 들어, 아이템 목록을 드래그하여 재정렬하기 위해 DragDropContext, Droppable, Draggable 컴포넌트를 사용할 수 있습니다.

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

const App = () => {
  const items = ['아이템 1', '아이템 2', '아이템 3'];

  const handleDragEnd = (result) => {
    // 드래그 앤 드롭 이벤트 처리 로직 작성
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="items">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item} draggableId={item} index={index}>
                {(provided) => (
                  <li
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    {item}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

위 예제에서 handleDragEnd 함수는 드래그 앤 드롭 이벤트가 완료되었을 때 호출되는 콜백 함수입니다. 여기서는 드래그한 아이템의 위치를 업데이트하는 로직을 작성하는 등 필요한 처리를 수행할 수 있습니다.

단축키 지원하기

Beautiful Dnd는 기본적으로 단축키를 지원하지 않습니다. 하지만 우리는 이를 커스터마이징하여 단축키를 추가할 수 있습니다.

우선 단축키를 위한 이벤트 핸들러를 만들어야 합니다. 다음은 간단한 예시입니다:

import React, { useEffect } from 'react';

const App = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      // 이전 아이템으로 이동
    } else if (event.key === 'ArrowDown') {
      // 다음 아이템으로 이동
    }
  };

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  // ...
};

위 예시에서는 ArrowUp 키와 ArrowDown 키를 누르면 이전/다음 아이템으로 이동하는 로직을 작성하였습니다.

결론

이번 포스트에서는 Beautiful Dnd를 사용하여 드래그 앤 드롭 기능을 구현하고, 단축키를 지원하는 방법에 대해 알아보았습니다. Beautiful Dnd는 사용자 친화적인 인터페이스로 아이템을 재정렬하거나 이동시킬 수 있게 도와주는 강력한 라이브러리입니다. 앞으로 여러분의 프로젝트에서 Beautiful Dnd를 활용하여 사용성을 높여보세요!

참고 문서: react-beautiful-dnd GitHub 페이지

목차

Beautiful Dnd 소개

드래그 앤 드롭 기능 구현하기

단축키 지원하기

결론