[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 이벤트 캘린더 만들기

21 Nov 2023

javascript

오늘은 JavaScript 라이브러리인 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 이벤트 캘린더를 만들어 보려 합니다.

필요한 패키지 설치하기

먼저, 프로젝트 디렉토리에서 아래 명령어를 사용하여 Beautiful Dnd 패키지를 설치해야 합니다.

npm install react-beautiful-dnd

이벤트 캘린더 컴포넌트 생성하기

이제, 이벤트 캘린더를 표시할 컴포넌트를 생성해 보겠습니다. 예시로 EventCalendar라는 이름의 컴포넌트를 생성하도록 하겠습니다.

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

class EventCalendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      events: [
        { id: 'event1', content: '이벤트 1' },
        { id: 'event2', content: '이벤트 2' },
        { id: 'event3', content: '이벤트 3' },
      ],
    };
  }

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

    const events = [...this.state.events];
    const [reorderedEvent] = events.splice(result.source.index, 1);
    events.splice(result.destination.index, 0, reorderedEvent);

    this.setState({ events });
  }

  render() {
    return (
      <DragDropContext onDragEnd={this.handleDragEnd}>
        <Droppable droppableId="event-calendar">
          {(provided) => (
            <ul {...provided.droppableProps} ref={provided.innerRef}>
              {this.state.events.map((event, index) => (
                <Draggable key={event.id} draggableId={event.id} index={index}>
                  {(provided) => (
                    <li
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      ref={provided.innerRef}
                    >
                      {event.content}
                    </li>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default EventCalendar;

컴포넌트 사용하기

이제, 위에서 작성한 EventCalendar 컴포넌트를 다른 컴포넌트에서 사용해 보겠습니다.

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

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>이벤트 캘린더</h1>
        <EventCalendar />
      </div>
    );
  }
}

export default App;

위의 예시 코드에서는 Beautiful Dnd의 DragDropContext, Droppable, Draggable 등의 컴포넌트를 사용하여 이벤트 캘린더를 구현하였습니다. handleDragEnd 함수를 사용하여 드래그 앤 드롭의 결과를 처리하고, events 배열을 사용하여 이벤트들을 관리하였습니다.

결론

이렇게 Beautiful Dnd를 사용하여 드래그 앤 드롭으로 이벤트 캘린더를 만들어 보았습니다. Beautiful Dnd는 강력한 기능과 사용이 쉬운 API를 제공하므로 프로젝트에 적용하기 좋은 선택일 것입니다.