#7.0 To Do List part One

배운 것들을 복습하는 시간

 

※ state를 직접 수정할 수 없다

toDos.push(); // 불가능

 

toDo = "" 

잘못된 예

 

배열을 합칠 때 ... 이용하기

const food = [1,2,3,4,5];
const newFood = [100, ...food];

 

submit 동작을 막는 함수

event.preventDefault()

 

전체 코드

import { useState } from "react";
function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);

  const onChange = (event) => {
    setToDo(event.target.value);
  }
  console.log(toDo);

  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "")
      return;

    setToDos((currentArr) => [toDo, ...currentArr]);
    setToDo("");
  }

  console.log(toDos);

  return (
    <div>
      <h1>My todos {toDos.length}</h1>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do ..." />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;