이벤트응답 - 이벤트핸들러 1

이벤트핸들러 추가

• 컴포넌트 내부에 이벤트핸들러 정의
• handle+동사+명사 형태로 이벤트핸들러의 기능으로 네이밍 (ex/ handle + Show(동사) + Alert(명사) )
• 이벤트핸들러를 이벤트속성에 전달만 해야하며 handleShowAlert()하면 바로 실행되어버림

import './App.css';

export default function Button() {
  function handleShowAlert() {
    alert('클릭!');
  }

  return (
    <button className="btn" type="button" onClick={handleShowAlert}>
      클릭
    </button>
  );
}

 

-인라인 이벤트 핸들러: 짧은 함수일 경우 사용

import './App.css';

export default function Button() {
  return (
    <button className="btn" type="button" onClick={() => alert('클릭!')}>
      클릭
    </button>
  );
}