React로 To Do List 만들기

import { 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;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  console.log(toDos.map((item, index) => <li key={index}>{item}</li>));
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
    </div>
  );
}

export default App;

• useState로 toDo와 setTodo 설정
• input의 value를 toDo로 설정해서 input의 값을 받아옴.
• input의 값이 onChange로 바뀌면 setTodo(event.target.value( => 이벤트가 발생된 대상의 값을 받아옴)) 가 변경한 값을 저장.
• JS 내부에 submit이라는 이벤트가 존재하므로 preventDefault() 함수로 제출하는 것을 막고 if문을 써서 toDo가 비어있으면 setToDo(input)을 비워주는 함수를 씀.
• toDos를 통해 원래 있던 toDo의 값을 가져와서 추가로 적어주는 useState를 사용.
• toDos는 array를 받는데 첫번째 인자는 추가된 값이고 두번째 인자는 원래 있던 값들임. toDo, ...currentArray
• map 함수를 사용해서 item을 보여주면 끝. map함수는 특정한 key가 필요함. 여기에선 1,2,3..... 이다.