nomad code_react js로 영화앱 만들기_#7.0(To Do List part One)

2022. 11. 16. 16:58react

import {useState, useEffect} from "react";

function App(){
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange => (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();  // form 안의 button 기본값인 submit이벤트 차단
    if(toDo === ""){  // toDo(input)에 아무것도 입력되지 않았으면
      return;  // 아무것도 실행하지 않고 빠져나옴
    };
    setToDos(currentArray => [toDos, ...cruuentArray]);  // 기존 배열에 추가로 값을 넣는 법
    setToDo("");  // toDo(input)의 값 초기화
  };
  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"
      />
    </form>
    </div>
  );
};

export default App;

hi, bye, ok를 입력하고 버튼을 클릭하면 다음과 같이 콘솔에 출력된다.