React 설치

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

export default function List({ todoData, setTodoData }) {
    const handleCompleteChange = (e, id) => {
        e.stopPropagation();
        let newTodo = todoData.map((todo) => {
            if (todo.id === id) {
                todo.completed = !todo.completed;
            }
            return todo;
        })

        setTodoData(newTodo);
    }


    const handleClick = (id) => {
        let newTodo = todoData.filter(todo => todo.id !== id);
        setTodoData(newTodo);
    }

    const handleEnd = (result) => {
        console.log("result", result);

        if (!result.destination) return;

        const newTodoData = todoData;
        const [reorderItem] = newTodoData.splice(result.source.index, 1);
        newTodoData.splice(result.destination.index, 0, reorderItem);
        setTodoData(newTodoData);
    }

    return (
        <div>
            <DragDropContext onDragEnd={handleEnd}>
                <Droppable droppableId='todo'>
                    {(provided) => (
                        <div {...provided.droppableProps} ref={provided.innerRef}>
                            {todoData.map((data, index) => {
                                return (
                                    <Draggable
                                        key={data.id}
                                        draggableId={data.id.toString()}
                                        index={index}
                                    >
                                        {(provided, snapshot) => (
                                            <div key={data.id} {...provided.draggableProps}
                                                ref={provided.innerRef}
                                                {...provided.dragHandleProps}>
                                                <div className={`${snapshot.isDragging ? "bg-gray-400 " : "bg-gray-100 "} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`}>
                                                    <div>
                                                        <input type="checkbox" defaultChecked={false} onClick={(e) => handleCompleteChange(e, data.id)}></input>
                                                        <span className={data.completed ? 'line-through' : undefined}>{data.title}</span>
                                                    </div>
                                                    <div>
                                                        < button className='px-4 py-2 float-right' onClick={() => { handleClick(data.id) }} > x</button>
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </Draggable>
                                )
                            })
                            }
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    )
}

  handleReset(event) {
    this.setState(() => {
      return { searchKeyword: "" }
    }, () => {
      console.log("TODO: handleReset", this.state.searchKeyword);
    })
  }