⚛️React Training - section06 : ToDo List - map

이번 포스팅에선 이전 포스팅에 이어서 ToDo List를 마무리 해볼 것이다. 우리가 input태그에 작성한 값들이 useState 배열에 값을 저장하게 했다. 이 배열 값들을 우리는 브라우저 UI로 나올 수 있게 코드를 작성할 것이다. 이전에도 우리가 해보았듯 배열 값을 jsx에 효율 적으로 반복시키기 위해선 map함수를 사용 해야한다. 아래 코드를 살펴보자.

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])

  }

  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>

      <hr />

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

      }

    </div >

  )

}

현재 toDos에 저장되어 있는 배열 값들을 map함수로 반복하고 있다. 그리고 매개변수로는 toDos의 배열 값들을 data로 받아와서 li태그에 값을 부여한다. 여기서 주의 해야 할 것은 반복되는 태그는 항상 key값을 부여 해야하기에 index라는 매개변수로 li태그의 key값을 설정해주면 된다. 이 것으로 간단하게 만들어본 ToDo List이다. 이를 더 발전시면 해당 리스트의 값을 삭제하거나 수정할 수 있는 기능을 넣어 볼 수 있을 것이다.