인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

뽕리뽕뽕's profile image
뽕리뽕뽕

asked

Learn React A-Z by following along [19 version included]

Drag and Drop 잘 따라했는데... 작동이 안됩니다.

Written on

·

258

0

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>

  

  );        

}

 

reduxreacttddtypescriptNext.js

Answer 1

0

johnahn님의 프로필 이미지
johnahn
Instructor

안녕하세요!

죄송하지만 이렇게 봐서는 에러를 찾기가 쉽지 않아서요 ㅠㅠ

먼저 강의에 제공된 소스코드와 비교를 해주셔서 찾아주시고

그래도 안될 경우에는 새로운 글로 깃허브 저장소와 함께 올려주시면

제가 직접 해보겠습니다.

감사합니다.

뽕리뽕뽕's profile image
뽕리뽕뽕

asked

Ask a question