📝 Event란?

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있다.

🎯 Event 특징

• 이벤트의 이름은 카멜(Camel) 표기법으로 사용한다.
• 이벤트에 실행할 코드를 그대로 전달하는 것이 아니라 함수 형태의 객체를 전달해야 한다.
• DOM요소에만 이벤트 설정 가능이 가능하다.
• 직접 만든 리액트 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다.

이벤트 처리 방법

1) 핸들링 함수 선언

const App = () => {
  const handleClick = () => {
      alert("클릭했습니다.");
  }
  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
};

• 별도의 핸들링 함수를 선언하고 Element에 넘겨준다.
• DOM Element의 경우 핸들링 함수에 이벤트
  object를 매개변수로 전달한다.
• 이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가
  일어난 Element에 대한 정보를 얻을 수 있다.
• DOM 이벤트를 활용하는 것뿐만 아니라 커스텀 이벤트를 만들 수도 있다. (“on” + 동사 또는 “on” + 명사 + 동사 형태로 작성한다.)
• 이벤트 형태(클릭, 키 입력 등)와 DOM 종류(button,
  form, input 등)에 따라 전달되는 이벤트 object의
  내용이 다르다.

  ✔ 주요 DOM 이벤트
  onClick: Element를 클릭했을 때
  onChange: Element의 내용이 변경되었을 때 (input의 텍스트를 변경, 파일 선택 등)
  onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때
  onDoubleClick: Element를 더블 클릭했을 때
  onFocus: Element에 Focus되었을 때
  onBlur: Element가 Focus를 잃었을 때
  onSubmit: Form Element에서 Submit 했을 때

2) 익명 함수로 처리

const App = () => {
  return (
    <div>
      <button onClick={() => { alert('클릭했습니다.') }
      }>클릭하세요</button>
    </div>
  )
}

• 이벤트를 할당하는 부분에서 익명 함수를 작성한다.