본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

이벤트 소개

이벤트란?

• 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미
  • 유저의 생동, 개발자가 의도한 로직등에 의해 발생
    $\rarr$ 자바스크립트를 이용해 대응
• Element 클릭, 마우스 올릴 때, 더블클릭, 키보드 입력 등 다양하다.
• 이벤트 핸들러 함수에서는 다양한 로직을 처리하고 그 결과를 출력 가능

이벤트 처리(핸들러) 방법

• 핸들링 함수 선언
  <button onClick={handleClick}></button>
• 익명 함수로 처리
  <button onClick={() => { alert("클릭") }}></button>

이벤트 객체

• DOM Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달
• 이벤트 형태와 DOM 종류에 따라 전달되는 이벤트 object의 내용도 다르니 유의!!!

많이 쓰이는 DOM 이벤트

• onClick Element를 클릭 했을 때
• onChange Element의 내용이 변경되었을 대
• onKeydown, onKeyup, onKeyPress 키보드 입력이 일어났을 때
• onDoubleClick Element를 더블클릭 했을 때
• onFocus Element에 Focus 되었을 때
• onBlur Element가 Focus를 잃었을 때
• onSubmit Form Element에서 Submit 했을 때

컴포넌트 내 이벤트 처리

• DOM 버튼 클릭
• DOM Input 값을 State에 저장하기
• 여러 Input 동시에 처리하기

다른 컴포넌트로 이벤트 전달

• 컴포넌트 간 이벤트 전달하기
  • 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우 이벤트를 Props로 전달하여 처리
• 커스텀 이벤트
  • 단순히 DOM이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.
• 이벤트 명명법
  • "on" + 동사 또는 "on" + 동사 + 명사 형태로 작성