10. map

 

간단한 ToDoList를 만들건데 .map 메서드의 기능을 사용할 것이다.

<input>을 통해 toDo를 받을 것이고 얘네는 toDos란 array에 저장된다.

form에 onSubmit을 줘서 기존 array를 ...array로 복사하고 맨 앞에 새로운 toDo를 추가해준다.

toDos Array는 이렇게 만들어지고 이를 출력하기 위해 아래에 .map함수를 사용한다.

map 함수는 배열 안의 각각의 항목에 대해 처리를 한 다음 다시 새로운 배열로 돌려준다.

이 예제를 예로 생각해보면

1,2,3,4,5를 toDo에 순서대로 추가해줬다고 치자.

toDos = [5, 4, 3, 2, 1] 이렇게 되어있을 것이고 toDos.map( (toDo, index) => <li key={index}>{toDo}</li>)를 실행하면

toDos안의 항목이 하나씩 돌면서 <li>안에 들어간 채로 출력되게 된다.

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( (toDo, index) => <li key={index}>{toDo}</li>)}
      </ul>
    </div>
  );
}

export default App;