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

import React from 'react'

    const List = React.memo (({
        id, title, completed, todoData, setTodoData, provided, snapshot
    }) =>{

    console.log('List is Rendering');

    const handleClick =(id) => {
        let newTodoData = todoData.filter((data)=> data.id !== id)
        console.log ('newTodoData', newTodoData);
        //this.setState({todoData: newTodoData});
        setTodoData(newTodoData);
        };

    const handleCompleteChange = (id) => {
        let newTodoData = todoData.map(data => {
            if(data.id === id){
            data.completed = !data.completed;
            }
            return data;
        })
        //this.setState({ todoData : newTodoData})
        setTodoData(newTodoData);
    };

  return (
    <div key={id} {...provided.draggableProps} ref={provided.innerRef} {...provided.dragHandleProps}
    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 bg-gray-100 rounded`}>

        <div className='item-center'>
            <input 
            type="checkbox" 
            defaultChecked={completed}
            onChange={() => handleCompleteChange(id)}/>
            <span className={completed ? 'line-through' : undefined}>{title}</span>
        </div>
            <div className='item-center'>
                <button className="px-4 py-2 float-right" onClick={()=> handleClick(id)}>x</button>
            </div>

    </div>
  )
});

export default List





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

const Lists = React.memo(({ todoData,setTodoData }) => {
  console.log('Lists Component');

  const handleEnd = (result) => {
    console.log('result', result);
    if(!result.destination) return;
    const newTodoData = todoData;

    //1. 변경시키는 아이템을 배열에서 지워줍니다.
    //2. return 값으로 지워진 아이템을 잡아줍니다.
    const [reorderedItem] = newTodoData.splice(result.source.index, 1);

    //3. 원하는자리에 reorderedItem을 insert 해줍니다.
    newTodoData.splice(result.destination.index, 0, reorderedItem);
    setTodoData(newTodoData);
    
  };
x
  return (
      <div>
      <DragDropContext onDragEnd={handleEnd}>
          <Droppable droppableId='todo'>
              {(provided) => (
                  <div {...provided.droppableProps} ref={provided.innerRef}>
                      {todoData.map((data, index) => (
                          <Draggable
                              key={data.id}
                              draggableId={data.id.toString()}
                              index={index}
                          >
                              {(provided, snapshot) => (
                                <List
                                  key={data.id}
                                  id={data.id}
                                  title={data.title}
                                  completed={data.completed}
                                  todoData={todoData}
                                  setTodoData={setTodoData}
                                  provided={provided}
                                  snapshot={snapshot}
                                />
                              )}
                          </Draggable>
                      ))}
                      {provided.placeholder}
                  </div>
              )}
          </Droppable>
      </DragDropContext>
  </div>
  );

});

export default Lists