◆React.js & Next.js & Node.js/React.js(라이브러리)

Event Handling(이벤트핸들링) 이란?

쿠키린 2025. 1. 30. 23:00

Event

웹 내부에서 발생하는 사용자의 행동

ex) 버튼 클릭, 메시지 입력, 스크롤 등

 

Handling

다루다, 취급하다, 처리하다.

 

⭐Event Handling(이벤트 핸들링)

이벤트가 발생했을 때 그것을 처리하는 것.

(웹에서 발생하는 사용자 행동을 처리하는 것)

  • ex1) 버튼 클릭 시 경고창 노출
  • ex2) 콘솔의 메시지를 출력

 

정리

  • 클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를 이벤트 핸들러라 부른다.
  • 이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수
  • 익명함수 OR 화살표 함수

 

👀예제

//클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를
//이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수
//익명함수 OR 화살표 함수로 만들어 주면 된다.
const onClickButton = () => {
    console.log("클릭");
}

...(생략)

return(
        // 클릭이벤트 핸들러로 onClickButton으로 설정
        //콜백함수를 전달하듯, 함수이름만 적어야 함.
    <button onClick={onClickButton}> </button>
)