◆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>
)