[React 기초] 06. 예제 - Todo List

JS 문법 

전개구문

전개 구문 - JavaScript | MDN

전개 구문을 사용하여 기존 배열에서 새로운 배열을 쉽게 추가할 수 있음

const array = [1, 2, 3, 4];
const newElement = 5;
const newArray = [...array, newElement];

map

map 함수를 사용하여, Array에 있는 요소를 react element로 출력할 수 있음

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

Todo List

import { useEffect, 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;
    }
    // 아래와 같이 state를 직접적으로 수정하지 않는다
    // toDos.push()
    // state는 함수를 사용하여 값을 수정
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="write what you have to..."
        ></input>
        <button>Add to Do</button>
      </form>
      <hr />
      {toDos.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </div>
  );
}

export default App;