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

먼저 제가 작성한 Lists.js의 소스코드는 아래와 같습니다.

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

export default function Lists({ todoData, setTodoData }) {
  //todo Checkbox 클릭했을때 실행되는 함수
  const handleCompletedChange = (id) =>{
    let newTodoData = todoData.map((data) =>{
      if(data.id === id){
        data.completed = !data.completed;
      }
      return data;
    });
    setTodoData(newTodoData);
  };

  //X버튼 클릭시 실행되는 함수
  const handleClick = (id) => {
    let newTodoData = todoData.filter((data) => data.id !== id);
    console.log("newTodoData",newTodoData);
    setTodoData(newTodoData);
  };

  //Drag가 끝날때 실행되는 함수
  const onDragEnd = (result) =>{
    console.log("result", result)
  }

  return (
    <div>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId='todo'>
          {(provided) => (
            <div 
              ref={provided.innerRef}
              {...provided.droppableProps}
            >
              {todoData.map((data, index) => (
                <Draggable
                key={data.id}
                draggableId={data.id.toString()}
                index={index}
                >
                  {(provided, snapshot) => {
                    <div 
                      key={data.id}
                      {...provided.draggableProps}
                      ref={provided.innerRef}
                      {...provided.dragHandleProps}
                      className={`${snapshot.isDragging ? "bg-gray-300": "bg-gray-200"} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 rounded bg-gray-200`}
                    >
                      <div className='items-center'>
                        {/* Checkbox */}
                        <input
                          className='mr-3' 
                          type="checkbox" 
                          defaultChecked={data.completed} 
                          onChange={()=>handleCompletedChange(data.id)}
                        />
                        {/* Todo Contents */}
                        <span className={data.completed ? "line-through":"none"}>{data.title}</span>
                      </div>
                      {/* + Button */}
                      <div>
                        <button className='px-4 py-2 float-right text-white' onClick={()=>handleClick(data.id)}>X</button>
                      </div>
                    </div>
                  }}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

스타일 관련부분 말고는 강사님이 작성하신 소스코드와 일치합니다. 그런데 실행하면 위와 같은 오류가 발생합니다. 질문 게시판에서 유사한 사례가 있나 싶어서 찾아봤습니다. index.js 파일에서 Restrict 모드를 제거하면 충돌에러를 없앤다고 하는데 지워도 바뀌는게 없습니다. 무엇이 원인인지 github이나 stackoverflow를 찾아봤는데두 마땅히 나오는게 없네요 ref 라는 이름이 문제일 수도 있다는 글을 보고 innerRef라고 변경해서 작성했는데도 똑같은 에러가 발생했습니다. 이유가 뭔지 알려주시면 감사하겠습니다.

혹시 몰라 App.js 의 소스코드는 아래와 같고,

import React, { useState } from "react";
import "./App.css";
import List from "./components/Lists";
import Form from "./components/Form";

function App(){
  const [todoData, setTodoData] = useState([]);
  const [value, setValue] = useState("");  

  //+ 버튼을 눌렀을때 실행되는 함수
  const handleSubmit = (e) =>{
    //form 안의 input에 값을 입력했을때 페이지 리로드 되는걸 막아줌
    e.preventDefault();
    //new todo data
    let newTodo = {
      id:Date.now(),
      title:value,
      completed: false,
    };
    //add new todo data on to the original todo list
    setTodoData((prev) =>[...prev, newTodo]);
    setValue("");
  }

    return(
      <div className="flex items-center justify-center w-screen h-screen bg-blue-100">
        <div className="w-full p-6 m-4 bg-white rounded-lg shadow-md lg:w-3/4 lg:max-w-lg">
          <div className="flex justify-between mb-3">
            <h1 className="text-xl font-mono">Todo-List</h1>
          </div>
          {/* Todo List */}
          <List todoData={todoData} setTodoData={setTodoData}/>
          {/* Todo List add button*/}
          <Form handleSubmit={handleSubmit} value={value} setValue={setValue}/>
          
        </div>
      </div>
    )
}

export default App;

제가 사용한 react와 react-beautiful-dnd의 버전은

{
  "name": "todoapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2"
  }
}

입니다.