react array에서 [a, ...b]의 사용!!

react에서 todo list를 만들 때 useState를 이용해서 추가될 때마다 상태를 업데이트한다.

onChange 함수로 toDo가 바뀔때 그것을 modifier 함수에 지정해준다.

또한 onSubmit 함수로 제출할 때 새로고침 방지해주고 아무것도 입력되지 않으면 비워준다.

또한 toDos array를 만들고, 어떤 toDo가 추가되면 현재 array에 새로운 toDo를 추가해준다.

 

setToDos((currentArray) => [toDo, ...currentArray])의 사용에 주의한다.

import { useEffect, useState } from "react";


function App() {
  const [toDo, setToDo] = useState("")
  const [toDos, setToDos] = useState([])
  const onChange = (event) => setToDo(event.target.value)
  const onSubmit = (event) => {
    event.preventDefault()
    if (toDo === "") {
      return;
    }
    setToDo("")
    setToDos((currentArray) => [toDo, ...currentArray])
  }
  console.log(toDos)
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit = {onSubmit}>
        <input value = {toDo} onChange = {onChange} type = "text" placeholder = "Write your to do..." />
      <button>Add To Do</button>
      </form>
      
    </div>
  );
}

export default App;