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

안녕하세요 현재 <To-Do 앱을 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기> 까지

진도를 따라가고 있는 수강생입니다.

클래스 컴포넌트-> 함수형으로 변경하고 있는데

아래 에러가 계속 뜨고 있습니다.ㅠㅠ 원인을 모르겠어서 맨 하단에 코드를 전부 복사해놓았습니다.

확인해봐주시면 감사하겠습니다 : )

import React, { useState } from "react";
import "./App.css";

// 함수형 component로 작업한 todoList
export default function App() {

  const btnStyle = {
    color: "#fff",
    border: "none",
    padding: "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float: "right",
  }
  const getStyle = (completed) => {
    return {
      padding: "10px",
      borderBottom: "1px dotted #ccc",
      textDecoration: completed ? "line-through" : "none"
    }
  };
  
  const {todoData, setTodoData} = useState([]);
  const {value, setValue} = useState("");

  // 할일 삭제
  const handleDelete = (id) => {
    let newTodoData = todoData.filter((data) => data.id !== id);
    setTodoData(newTodoData);
  };

  // 할일 input text에 입력
  const handleChange = (e) => {
    setValue(e.target.value)
  };

  // 입력된 value 목록에 추가
  const handleSubmit = (e) => {
    e.preventDefault();
    let newTodo = {
      id: Date.now(),
      title: value,
      completed: false,
    };
    // 원래 있던 할 일에 새로운 할 일 더해주기
    setTodoData((prev) => [...prev, newTodo]);
    setValue("");
  };

  // 완료된 내용 체크하여 상태 변경 해주기
  const handleCompleteChange = (id) => {
    let newTodoData = todoData.map((data) => {
      if (data.id === id) {
        data.completed = !data.completed;
      }
      return data;
    });
    setTodoData(newTodoData);
  }

  return (
    <div className="container">
      <div className="todoBlock">
        <div className="title">
          <h1>할일 목록</h1>
        </div>
        { todoData.map((data,index)=> (
          <div style={getStyle(data.completed)} key={data.id}>
            <input 
              type="checkbox" 
              id={data.id}
              onChange={() => handleCompleteChange(data.id)}
              defaultChecked={false}/>
            <label htmlFor={data.id}>{data.title}</label>
            <button 
              style={btnStyle} 
              onClick={() => handleDelete(data.id)}>
              x
              </button>
          </div>
        ))}
        
        <form style={{display:'flex', marginTop: '20px'}} onSubmit={ handleSubmit }>
          <input 
            type="text" 
            name="value" 
            style={{ flex:'10', padding:'5px'}} 
            placeholder="해야할 일을 입력하세요." 
            value={ value } 
            onChange={ handleChange }/>
          <input 
            type="submit" 
            value="입력" 
            className="btn" 
            style={{ flex:1 }}/>
        </form>
      </div>
    </div>
  )
}