📸 2022-07-14

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• React - useState와 컴포넌트간의 데이터 전달
• 좋은 코드, 나쁜 코드 서론 읽기

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

강의에서 form의 submit 시킬 때 event.preventDefault()로 submit 기본 동작은 막고 버튼 이벤트를 실행시킨다. form의 데이터를 어딘가로 전송하는게 아니니까 submit 기능말고 button에 바로 onClick 이벤트로 동작을 구현해도 동일하지 않을까?

// 1️⃣ input과 button을 form 요소 안에 위치시키고 submit 시킨 후 이벤트 핸들러 동작
const AddUserByForm = (props) => {
  const addUserHandler = (event) => {
    event.preventDefault();
    // 👇 실질적으로 원하는 동작
    console.log("addUserHandler");
  }

  return (
    <form onSubmit={AddUser}>
      <label htmlFor="name">
      <input type="text" id="name" />
      <button type="submit">Add</button>
    </form>
  );
}
// 2️⃣ button에 onClick 이벤트에 바로 함수 연결
const AddUserByButton = (props) => {
  const addUserHandler = () => {
    // 👇 실질적으로 원하는 동작
    console.log("addUserHandler");
  }

  return (
      <label htmlFor="name">
      <input type="text" id="name" />
      <button onClick={addUserHandler}>Add</button>
  );
}

🌟 내일은 어떻게 해보고 싶으세요?

• 좋은 코드, 나쁜 코드 계속 읽기