state를 수정하는 함수

import { useState, useEffect } 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(""); //state를 수정하는 함수 절대 toDos.push를 쓰지 않는다.
    setToDos((currentArray) => [toDo, ...currentArray]);
    //setToDos(function(currentArray))와 같다
    // ...은 위에서 설정한 [] 비어있는 array다. 띠리서 이 함수는
    //currentArray 라는 []배열에 toDo를 추가하는 것이 된다.
  };

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="write yout to do"
        />
        <button>Add to do</button>
      </form>
    </div>
  );
}
export default App;

state값을 수정할때 사용하는 함수의 두가지 방식
1. setToDo(""); 단순히 값만 보내는 방식
2. setToDos((currentArray) => [toDo, ...currentArray])값을 보내는 방식

2번째 방식은 현재 state를 계산하거나 추가할때 사용된다.
현재 toDo 를 받아와서 현 state에 들어온 모든 데이터와 함하여 새로운 state를 만든다.