7.0부터

Todolist

 

 

map() 사용법

- 배열 각각의 element를 바꾸고 싶을 때

 

배열.map(function)

- map의 괄호 안에 function은 array의 모든 item에 대해 실행되는 함수

- 그 함수에서 return한 값이 새로운 array에 들어가 있다.

 

map은 함수의 첫 번째 매개변수로 현재의 item을 가지고 올 수 있다.

 

 

import { useEffect, useState } from "react";
import Button from "./Button";

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("");
  };
  return (
    <div>
      <h1>My To Dos({toDos.length})</h1>
      <form>
        <input 
          onChange={onChange} 
          value={toDo}
          type="text" 
          plcaeholder="Write your to do..." />
        <button onClick={onSubmit}>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;