https://www.youtube.com/watch?v=MzVq1vddlSI&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=6

이벤트 만들어보기

1. button

1) 위에 함수 미리 생성 + onClick

export default function Hello() {
  function showName() {   //👈 생성한 함수
    console.log("Mike");
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>  //👈 onClick
      <button>Show age</button>
    </div>
  );
}

//console에서 Show name버튼을 누르면 Mike가 잘 찍힌다.

2) onClick 내부에 함수 작성

2-1) 내부에 함수 작성하는 방법 1

export default function Hello() {
  function showName() {
    console.log("Mike");
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button
        onClick={() => {       //👈 onClick 내부에 함수 작성
          console.log(30);
        }}
      >
        Show age
      </button>
    </div>
  );
}

//console에서 Show age버튼을 누르면 30이 잘 찍힌다.
//실제 나이 아님 주의

장점: 매개변수를 전달하기 편하다.

2-2) 내부에 함수 작성하는 방법 2

export default function Hello() {
  function showName() {
    console.log("Mike");
  }
  function showAge(age) {   //👈 함수 작성
    console.log(age);
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button
        onClick={() => {
          showAge(20);   //👈 전달
        }}
      >
        Show age
      </button>
    </div>
  );
}

//실제 나이 아님 주의

2. input

export default function Hello() {
  function showName() {
    console.log("Mike");
  }
  function showAge(age) {
    console.log(age);
  }
  function showText(e) {   //👈 text를 보기위한 함수 작성
    console.log(e.target.value);
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button
        onClick={() => {
          showAge(20);
        }}
      >
        Show age
      </button>
      <input type="text" onChange={showText} /> //👈 onChange이벤트
    </div>
  );
}

//글자를 쓸 때마다 로그가 찍힌다.

아래와 같이 작성해도 동일하게 작동한다.

export default function Hello() {
  function showName() {
    console.log("Mike");
  }
  function showAge(age) {
    console.log(age);
  }
  function showText(txt) {   //👈 수정된 부분
    console.log(txt);
  }
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
      <button
        onClick={() => {
          showAge(20);
        }}
      >
        Show age
      </button>
      <input
        type="text"
        onChange={(e) => {
          const txt = e.target.value;   //👈 수정된 부분
          showText(txt);
        }}
      />
    </div>
  );
}

위의 showText 함수를 지우고
input을 아래처럼 작성해도 동일하게 작동한다.

<input
  type="text"
  onChange={(e) => {
  console.log(e.target.value);
 }}
/>