[React] React.js로 간단하게 To-Do-App 만들기

App.js

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  // 앱이 시작될 때는 비어있는 array
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    // input에 입력한 새로운 toDo + 현재 상태의 toDos를 array 형태로 추가하는 코드로,
    // "..."는 array에 특정 값을 추가(push)할 때 사용하는 코드 
    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>
        ))}
        {/* toDos에 저장된 array(item)들을 map함수를 통해 각각 li태그 적용 */}
      </ul>
    </div>
  );
}

export default App;