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

21 Nov 2023

javascript

이번 포스트에서는 Beautiful Dnd 라이브러리를 사용하여 React 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 방법과 모달 창을 만드는 방법을 알아보겠습니다.

Beautiful Dnd란?

Beautiful Dnd는 React 용으로 만들어진 드래그 앤 드롭 라이브러리로, 사용자가 원하는 컴포넌트를 드래그하여 다른 위치로 이동시킬 수 있는 기능을 제공합니다. 이 라이브러리를 사용하면 사용자 친화적인 드래그 앤 드롭 인터페이스를 손쉽게 구현할 수 있습니다.

모달 창 만들기

먼저, Beautiful Dnd를 사용하여 모달 창을 드래그 앤 드롭할 수 있도록 만들어보겠습니다.

Beautiful Dnd 설치하기

프로젝트 폴더에서 다음 명령어를 실행하여 Beautiful Dnd를 설치합니다.
```
npm install react-beautiful-dnd
```

모달 창 컴포넌트 생성하기

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

const Modal = () => {
  // 모달 창의 상태 및 드래그 앤 드롭 관련 변수 설정
   
  return (
    <DragDropContext>
      <Droppable droppableId="modal">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            style={getModalStyle(snapshot.isDraggingOver)}
          >
            <Draggable draggableId="content" index={0}>
              {(provided, snapshot) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                >
                  {/* 모달 창 내용 */}
                </div>
              )}
            </Draggable>
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default Modal;

Modal 컴포넌트에서는 DragDropContext, Droppable, Draggable 컴포넌트를 import하여 사용합니다. Draggable 컴포넌트로 드래그 대상 컴포넌트를, Droppable 컴포넌트로 드롭할 수 있는 영역을 정의합니다.

모달 창 스타일링하기
```
const getModalStyle = (isDraggingOver) => ({
  backgroundColor: isDraggingOver ? 'lightblue' : 'lightgray',
  padding: '10px',
  border: '1px solid #ccc',
  borderRadius: '4px',
});
```
getModalStyle 함수를 사용하여 드래그 앤 드롭 대상인 모달 창의 스타일을 정의합니다. isDraggingOver 매개변수를 통해 현재 드래그 앤 드롭이 발생하고 있는지를 확인합니다.
드래그 앤 드롭 이벤트 처리하기
```
const onDragEnd = (result) => {
  // 드래그 앤 드롭 이벤트 처리 로직 작성
};

<DragDropContext onDragEnd={onDragEnd}>
  {/* 모달 창 구현 */}
</DragDropContext>
```
onDragEnd 함수를 사용하여 드래그 앤 드롭 이벤트를 처리합니다. 필요에 따라 이벤트 핸들러 함수를 작성하고, onDragEnd 프로퍼티로 전달합니다.

모달 창 렌더링하기

const ModalContainer = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>모달 열기</button>
      {isModalOpen && (
        <Modal>
          <button onClick={handleCloseModal}>모달 닫기</button>
        </Modal>
      )}
    </div>
  );
};

export default ModalContainer;

ModalContainer 컴포넌트에서는 모달 창을 열고 닫을 수 있는 버튼과 모달 컴포넌트를 렌더링합니다.

이제 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 모달 창을 만들었습니다. 이 방법을 활용하여 원하는 기능을 구현해보세요!

Beautiful Dnd란?

모달 창 만들기

참고 자료