리액트 toDo

import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = e => setToDo(e.target.value);
  const onSubmit = e => {
    e.preventDefault(); //화면이 새로고쳐지는 현상 방지
    if (toDo === '') { //버튼을 누르면 form 내 글자 초기화
      return;
    }
    setToDos(curArr => [toDo, ...curArr]);
    //리액트는 함수의 첫번째 인자로 현재의 값(현재 state)을 보냄.
    setToDo(""); //todo에 빈 값을 보낼 수 있음.
  }
  return (
    <div>
      <h1>My To Dos({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your todo" />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, idx) => { return <li key={idx}>{item}</li> })}
      </ul>
    </div>
  );
}



// export default App;
export default App;