⚛️React Training - section06 : ToDo List

이번 포스팅은 우리가 지금까지 배운 것들을 가지고 간단한 ToDo List를 만들어 볼 것이다. 지금까지 배운 것을 잘만 따라 왔다면 어려움 없이 진행할 것이다. 코드는 아래와 같다. 

 

import { useState } from "react"

export default function SubApp() {

  const [toDo, setToDo] = useState("");

  const [toDos, setToDos] = useState([]);

  const onChange = (event) => setToDo(event.target.value);

  const onSubmit = (event) => {

    event.preventDefault();

    if (toDo === "") {

      return;

    }

    setToDo("")

    setToDos(currentArray => [toDo, ...currentArray]) //num = [1,2,3,4] / setNum = [5, ...number]

  }

  console.log(toDos);

  return (

    <div>

      <h1>My To Do ({toDos.length})</h1>

      <form onSubmit={onSubmit}>

        <input

          onChange={onChange}

          value={toDo}

          type="text"

          placeholder="Write your to do..."

        />

        <button>Add To Do</button>

      </form>

    </div>

  )

}

 

input태그에 값을 넣으면 event로 해당 value값을 setToDo에 값을 전달해준다. 그리고 useState로 저장된 toDo값을 onSubmit함수로 전달되면서 setToDos 배열 useState에 값을 저장하게 되는 것이다. 나머지 event.preventDefault()와 if문들은 우리가 지금까지 많이 바왔던 구문이라 짚고 넘어가지 않겠다. 이렇게 간단하게 input태그를 통해서 값을 생성하는 코드를 작성해 봤다. 다음 포스팅에선 이 코드를 더 업그레이하는 포스팅으로 돌아오겠다.