react에서 to-do-list 만들기는 바닐라 js에 비해 너무 쉬움!!

toDos를 가져온 다음에

map 함수를 이용해서 하나씩 뽑아서 li에 넣어주기만 하면 됨!!

li 마다 index가 필요하기 때문에 li의 key로 index 하나 넣어주고

{toDos.map((toDo, index)=> <li key={index}>{toDo}</li>)}

결론적으로 전체 코드

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>
      <hr />
      {toDos.map((toDo, index)=> <li key={index}>{toDo}</li>)}
    </div>
  );
}

export default App;