• 실습일자 : 2024.04.23

코드

⇒ src/App.js

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);

  const onChange = (e) => setToDo(e.target.value); // 함수
  const onSubmit = (e) => { // 함수
    e.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((nowToDoArray) => [toDo, ...nowToDoArray]);
    setToDo("");
  };
  console.log(toDos);

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          onChange={onChange}
          placeholder="Input Your TO Do List"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

• form은 Submit 이벤트를 보유
  • 그래서 input 컴포넌트에서 값 입력후 Enter키를 치거나 Add To Do 버튼을 클릭하면 onSubmit 이벤트 발생
    • onSubmit 함수 실행
      • 편의상 onSubmit 함수라 했지, 이 함수명은 바뀌어도 됨
  • input 값이 변동될 경우, onChange 이벤트 발생
    • onChange 함수 실행
      • 편의상 onChange 함수라 했지, 이 함수명은 바뀌어도 됨
• e.target.value
• e.preventDefault()

화면

느낀점

• 수업 때 사용했던 코드 거의 그대로 사용했다.
• 하지만, 단순히 그 내용을 복붙하지 않고 그 코드를 이해한 후 처음부터 마지막까지 스스로 코드를 구현해 보았다.
• 그러면서 target.value 와 preventDefault() 가 어떤 이유로 인해 존재하고, 어떤 원리로 작동되는지 배우는 시간이 되었다.
• 다음에는 아마 To Do List 항목을 차례대로 화면에 뿌리는 것을 할 것이다.
• 이에 대한 수업 내용을 보기 전에, 내 스스로 먼저 코드를 작성해봐야 겠다.

참고

• [form의 action 과 onSubmit의 차이]
  • https://velog.io/@suminllll/form의-action-과-onSubmit의-차이
• [React - e.target.value에 대한 탐구]
  • https://jemerald.tistory.com/24
• [Event.preventDefault()]
  • https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault