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

21 Nov 2023

javascript

Beautiful Dnd는 React를 위한 드래그 앤 드롭 라이브러리로, 사용자 친화적인 인터페이스를 구축하는 데 도움이 됩니다. 이번 튜토리얼에서는 Beautiful Dnd를 사용하여 알림 메시지를 드래그 앤 드롭할 수 있는 컴포넌트를 만드는 방법을 알아보겠습니다.

1. Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

npm install react-beautiful-dnd

또는

yarn add react-beautiful-dnd

2. 알림 메시지 컴포넌트 만들기

이제 알림 메시지 컴포넌트를 만들어 보겠습니다. 다음은 알림 메시지를 표시할 수 있는 예시 코드입니다.

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

const NotificationList = () => {
  const [notifications, setNotifications] = useState([
    { id: '1', content: '첫 번째 알림 메시지' },
    { id: '2', content: '두 번째 알림 메시지' },
    { id: '3', content: '세 번째 알림 메시지' }
  ]);

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

    const newNotifications = Array.from(notifications);
    const [reorderedNotification] = newNotifications.splice(result.source.index, 1);
    newNotifications.splice(result.destination.index, 0, reorderedNotification);

    setNotifications(newNotifications);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="notificationList">
        {(provided) => (
          <ul ref={provided.innerRef} {...provided.droppableProps}>
            {notifications.map((notification, index) => (
              <Draggable key={notification.id} draggableId={notification.id} index={index}>
                {(provided) => (
                  <li
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {notification.content}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default NotificationList;

위의 예시 코드에서는 DragDropContext, Droppable, Draggable 컴포넌트를 사용하여 알림 메시지를 드래그 앤 드롭할 수 있는 리스트를 구현했습니다. onDragEnd 함수는 드래그 앤 드롭이 완료되었을 때 알림 메시지의 순서를 업데이트하는 역할을 합니다.

3. 컴포넌트 사용하기

위에서 만든 알림 메시지 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다. 예를 들면 다음과 같습니다.

import React from 'react';
import NotificationList from './NotificationList';

const App = () => {
  return (
    <div>
      <h1>알림 메시지</h1>
      <NotificationList />
    </div>
  );
};

export default App;

위의 코드에서는 NotificationList 컴포넌트를 App 컴포넌트 내에 렌더링했습니다. 화면에 보여질 알림 메시지를 추가하거나 제거하기 위해서는 NotificationList 컴포넌트의 notifications 상태를 변경하는 방식으로 로직을 추가해야 합니다.

마무리

드래그 앤 드롭 기능은 사용자 경험을 향상시키고 더 직관적인 인터페이스를 구현하는 데 도움을 줍니다. Beautiful Dnd를 통해 알림 메시지와 같은 컴포넌트를 간단히 구현해 볼 수 있습니다. Beautiful Dnd의 자세한 사용법은 공식 문서를 참조하세요.