[javascript] Beautiful Dnd를 사용하여 드래그 앤 드롭으로 스티커 만들기

21 Nov 2023

javascript

Beautiful Dnd는 React에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 이 블로그 포스트에서는 Beautiful Dnd를 사용하여 스티커를 드래그 앤 드롭으로 이동할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다.

Beautiful Dnd 설치하기

먼저 Beautiful Dnd를 설치해야 합니다. npm을 사용하여 다음 명령어로 설치할 수 있습니다:

npm install beautiful-react-dnd

스티커 컴포넌트 생성하기

드래그 앤 드롭으로 이동할 수 있는 스티커를 만들기 위해 스티커 컴포넌트를 생성해야 합니다. 예시로 간단한 스티커 컴포넌트를 만들어 보겠습니다:

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

const Sticker = ({ id, text, index }) => {
  return (
    <Draggable draggableId={id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{
            background: 'yellow',
            padding: '10px',
            margin: '10px',
            borderRadius: '4px',
          }}
        >
          {text}
        </div>
      )}
    </Draggable>
  );
};

export default Sticker;

스티커 컴포넌트는 Draggable 컴포넌트로 감싸져 있습니다. Draggable 컴포넌트는 각 스티커를 드래그하고 드롭할 수 있는 기능을 제공합니다. 스티커의 id와 index는 필수 prop이며, text는 스티커에 표시될 텍스트입니다.

스티커 목록 생성하기

다음으로, 스티커 목록을 생성해보겠습니다. 예시로 3개의 스티커를 가진 스티커 목록을 만들어 보겠습니다:

import React from 'react';
import { DragDropContext, Droppable } from 'beautiful-react-dnd';
import Sticker from './Sticker';

const StickerBoard = () => {
  const stickers = [
    { id: '1', text: 'Sticker 1' },
    { id: '2', text: 'Sticker 2' },
    { id: '3', text: 'Sticker 3' },
  ];

  const handleDragEnd = (result) => {
    // 드래그 앤 드롭 완료 시 실행되는 콜백 함수
    // 이곳에서 상태를 업데이트하거나 다른 작업을 수행할 수 있습니다.
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="stickers">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {stickers.map((sticker, index) => (
              <Sticker key={sticker.id} id={sticker.id} text={sticker.text} index={index} />
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default StickerBoard;

위 코드에서 handleDragEnd 함수는 드래그 앤 드롭 완료 시 실행되는 콜백 함수입니다. 이곳에서 스티커 목록의 상태를 업데이트하거나 다른 작업을 수행할 수 있습니다.

결과 확인하기

이제 스티커 목록이 드래그 앤 드롭으로 움직이는 것을 확인해 볼 수 있습니다. 스티커 목록을 렌더링하는 최상위 컴포넌트에서 StickerBoard 컴포넌트를 사용하여 보여줄 수 있습니다:

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

const App = () => {
  return (
    <div className="App">
      <StickerBoard />
    </div>
  );
};

export default App;

위의 예시 컴포넌트들을 사용하여 애플리케이션을 실행하면 스티커 목록을 드래그 앤 드롭으로 움직일 수 있는 기능이 추가된 것을 확인할 수 있습니다.

더 많은 정보와 예시는 Beautiful Dnd 공식 문서를 참고해 주세요.