[React] Map을 이용하여 To do List

사용 기능
- Map
- useState

 

//App.js

import { useState } from "react"

function App() {
  //input 입력 값 관리
  const [toDo, setToDo] = useState("")
  
  //To do List 상태 관리
  const [toDos, setToDos] = useState([])
  
  //BtnClick Event
  const onSubmit = (e) => {
    e.preventDefault()
    
    //input 입력 값이 빈 값이면 다시 돌려보냄
    if (toDo === "") {
      return
    }
    
    //입력 값을 현재 배열과 더해 새로운 배열을 생성
    setToDos((current) => [...current, toDo])
    
    //입력 값 초기화
    setToDo("")
  }
  console.log(toDos)
  return (
    <div>
      <h1>My To Dos({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          value={toDo}
          onChange={(e) => setToDo(e.target.value)}
          type="text"
          placeholder="Write ur to do"
        />
        <button>Add to do</button>
        <br />
      </form>
      <ul>
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  )
}

export default App