리액트7 toDoList만들기 /배열, map()

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;
    setToDos( (currentArray)=> [toDo, ...currentArray] );
    setToDo("");
  }
  return (
    <div>
      <h1>my ToDoList{toDos.length}</h1>
      <form onSubmit={onSubmit}>
      <input value={toDo} type="text" onChange={onChange} />
      <button>submit</button>
      </form>
      <hr />
        {toDos.map( (item,index) => (
          <li key={index}>{item}</li>
        ))}
    </div>
  )
}

export default App;

 

 

    setToDos( (currentArray)=> [toDo, ...currentArray] );

    함수를 보낼때, react는 함수의 첫번째 argument로 현재 state를 보낸다.
    ...currentArray 는 currentArray의 element를 돌려줌

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

map() 은 자바스크립트함수로

하나의 array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 하고 새로운 array로 return해준다.

첫번째 argument로 현재의 item을 가져올 수 있다.