인프런 커뮤니티 질문&답변

index.js에서 React.StrictMode를 제거를 하여도 작동이 안됩니다...ㅠㅠㅠ

그래서 그냥 넘어가면서 공부하자 해서 handleEnd도 동일하게 작성한거 같은데 이제는 화면에 보이지도 않습니다... 혹시 문제가 무엇일까요...ㅠㅠㅠ

import React from 'react';

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

export default function list({todoData,setTodoData})  {

  const handComplete =(id)=>{

    let newTododata = todoData.map(data => {

      if(data.id ===id){

        data.completed = !data.completed;

      }

      return data;

    })

    setTodoData(newTododata);

  }

  const handClick=(id)=>{

    let newTododata = todoData.filter((data) => data.id !== id)

    setTodoData(newTododata);

  }

  const handleEnd=(result)=>{

    if(!result.destination) return;

    //리액트 불변성을 지켜주기 위해 새로운 todoData 생성

    const newTododata =  todoData

    //1. 변경시키는 아이템을 배열에서 지워줍니다.

    //2. return 갑으로 지워진 아이템을 잡아줍니다.

    const [reorderedItem] = newTododata.splice(result.source.index,1);

    //원하는 자리에 reorderedItem을 insert 해줍니다.

    newTododata.splice(result.destination.index,0,reorderedItem);

    setTodoData(newTododata);

  }

  return (

    <div>

      <DragDropContext onDragEnd={handleEnd()}>

        <Droppable droppableId="todo">

          {(provided) => (

            <div {...provided.droppableProbs} ref={provided.innerRef}>

      {todoData.map((data,index) =>(

        <Draggable

        key={data.id}

          draggableId={data.id.toString()}

          index={index}

          >

          {(provided, snapshot)=>(

      <div

      key={data.id}

      {...provided.droppableProbs}

      ref={provided.innerRef}

      {...provided.dragHandleProps}

      className={`${

        snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} flex items-center justify-between w-full px-4 my-2 text-gray-600  border rounded `}

      >

          <div className='items-center'>

          <input type="checkbox" defaultChecked={false}

          onChange={()=> handComplete(data.id)}/>{" "}

          <span

          className={data.completed ? "line-through" : undefined}>{data.title} </span>

          </div>

          <div>

          <button className='px-4 py-2 float-right' onClick={()=>handClick(data.id)}>x</button>

          </div>

        </div>

        )}

        </Draggable>

        ))}

        {provided.placeholder}

        </div>

          )}

        </Droppable>

        </DragDropContext>

    </div>

  );        

}