To Do List

⚠️ State 직접 수정 X

• 함수를 통해서 간접적으로 수정한다
  ex) toDo = "" (x)
  
• state 변경하는 함수(setToDos) 안에 다시 함수 작성하여 state 수정
• currentArray가 함수의 입력 매개변수, => 하여 그 다음에 리턴될 새로운 array 작성

map()

• js 함수
• [].map((item) => item.toUpperCase())
• array의 원소마다 차례대로 map이 실행되어 바꿔줌
• map 쓸 때 각 element마다 고유 key 넣어줘야 함

🖥️ 코드

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);
  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>
  );
}

export default App;

• [toDo, ...currentArray] 로 원소 추가
• form 제출 후 새로고침 방지 위해 onSubmit 컴포넌트에 event.preventDefault()