[React] #7.1 To Do List

//App.js

import { useState, useEffect } 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 ;
    };
    // 절대 state를 직접적으로 수정하지 않는다. -> 함수를 사용해 수정
    setToDos(currentArray => [toDo, ...currentArray]);// currentArray를 받는 함수
    //... = element를 가져와서 새로운 Array로 만들기 위해
    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>))}
      </ul> 
    </div>
  );
}
  // map은 하나의 array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 함
export default App;

 

실행 화면