본문 바로가기

리액트 기기기초

#7.0 To Do List part One

배열 원소 합치는 법

  • array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법 
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("");
  };
  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을 submit*/}

      </form>
    </div>
  );
}

export default App;

'리액트 기기기초' 카테고리의 다른 글

#7.2 Coin Tracker  (0) 2023.03.11
#7.1 To Do List part Two  (0) 2023.03.11
#6.4 Cleanup  (0) 2023.03.10
#6.3 Recap  (0) 2023.03.10
#6.2 Deps  (0) 2023.03.10