[React] Class -> Function 변경 실습

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

export default function App (){
 
 

  const [todoData, setTodoData] = useState([]);
  const [value,setValue] = useState("");
 
  const btnStyle = {
    color: "#fff",
    border: "none",
    padding : "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float:"right"
  }

  const getStyle = (completed) => {
    return {
      padding : "10px",
      borderBottom: "1px #ccc solid",
      textDecoration: completed ? 'line-through' : 'none',
    }
  }

  const handleChange = ( e) =>{

    setValue(e.target.value); 
  }
  const handleClick = (id) => {
    let newTodoData = todoData.filter(data => data.id !== id)
    console.log('newTodoData',newTodoData);
    setTodoData(newTodoData);
  }

  const handleSubmit = (e) =>{
    e.preventDefault(); // 전송시 페이지 새로고침 방지 함수

    let newTodo = {
      id : Date.now(),
      title: value,
      completed : false
    }; // 새로운 할 일 데이터의 형성 
    setTodoData(prev =>
      [...prev,newTodo]
      )
      setValue("")
// 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수
  } 

  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>To do list</h1>
          </div>

          {todoData.map((data)=>(
            <div style = {getStyle(data.completed)} key = {data.id}> 
              <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/>
              {data.title}
              <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button>
              </div>
          ))}

          <form style = {{display:"flex"}} 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>
    )
 
          }