To Do List(...배열명, map)

import logo from './logo.svg';
import temp from './img.png';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
  let [toDo, setToDo] = useState('');
  let [toDos, setToDos] = useState([]); //여러 개의 toDo를 받을 수 있는 array

  let onChange = (event) => {
    setToDo(event.target.value);
  }
  let onSubmit = (event) => {
    event.preventDefault();

    if(toDo === ''){ //빈값일 경우 실행시키지 않음
      return;
    }

    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo('');
    console.log(toDos);
  }

  return <div>
    <h1>My To Dos ({toDos.length})</h1>
    <form onSubmit={onSubmit}>
      <input value={toDo} type='text' placeholder='write your to do...' onChange={onChange} />
      <button type='submit'>Add To Do</button>
    </form>

    <hr />

    <ol>
      {toDos.map((item, index) => <li key={index}>{item}</li>)}
    </ol>
  </div>
}

export default App;

알아가야 할 것

1. ...배열변수명
배열에 새로운 배열을 넣는 것과 배열을 복붙하는 것은 다르당.

2. map
item, index 등의 argument로 배열 일괄 작업 가능~~