Beautiful Dnd는 React용 드래그 앤 드롭 라이브러리로, 사용자 인터페이스에서 요소를 드래그하여 쉽게 이동시킬 수 있도록 도와줍니다. 이번 블로그 포스트에서는 Beautiful Dnd를 사용하여 퀴즈를 만드는 방법을 알아보겠습니다.
Beautiful Dnd 설치하기
Beautiful Dnd를 사용하기 위해 먼저 React 프로젝트에 패키지를 설치해야 합니다. 아래의 명령어를 터미널에 입력하여 Beautiful Dnd를 설치합니다.
npm install react-beautiful-dnd
프로젝트 설정하기
퀴즈를 만들기 위해 새로운 React 컴포넌트를 생성합니다. 이 컴포넌트에서 Beautiful Dnd를 사용하여 퀴즈를 구현할 것입니다.
import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const Quiz = () => {
// 퀴즈 데이터
const questions = [
{ id: '1', content: '질문 1' },
{ id: '2', content: '질문 2' },
{ id: '3', content: '질문 3' },
];
// 드래그 앤 드롭 이벤트 처리 함수
const onDragEnd = (result) => {
// 드래그 앤 드롭 이벤트 처리 로직
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="quiz">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{questions.map((question, index) => (
<Draggable key={question.id} draggableId={question.id} index={index}>
{(provided) => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
>
{question.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
export default Quiz;
퀴즈 구현하기
위의 코드에서 questions 배열은 퀴즈의 질문 목록을 저장하고 있습니다. onDragEnd 함수에서는 드래그 앤 드롭 이벤트를 처리하는 로직을 구현할 수 있습니다.
드래그 앤 드롭 이벤트 처리 함수인 onDragEnd에서는 드롭 된 항목의 최종 위치(result.destination.index)와 원래 위치(result.source.index)를 확인할 수 있습니다. 이를 활용하여 퀴즈 항목의 순서를 업데이트하거나 다른 로직을 수행할 수 있습니다.
결과 확인하기
위의 코드를 실행하면 퀴즈 항목들이 보여지고, 사용자는 이를 드래그하여 재정렬할 수 있습니다. 드래그 앤 드롭 이벤트가 발생하면 onDragEnd 함수가 호출되어 항목의 순서를 업데이트합니다.
Beautiful Dnd의 강력한 기능을 활용하여 다양한 드래그 앤 드롭 인터페이스를 만들어낼 수 있습니다. 공식 문서에서 더 자세한 정보와 예제를 확인할 수 있으니 참고하시기 바랍니다.
- Beautiful Dnd 공식 문서: https://react-beautiful-dnd.netlify.app/
이렇게 Beautiful Dnd를 사용하여 드래그 앤 드롭 기능을 구현하여 퀴즈를 만들어보았습니다. 이러한 기능을 활용하여 사용자 경험을 개선할 수 있고, 복잡한 인터페이스를 쉽게 구현할 수 있습니다.