함수가 실행되는 것과 함수 자체를 할당하는 것은 JavaScript 이벤트 처리에서 중요한 개념이다.
🔎 함수가 실행되는 것
이벤트 처리기로 함수를 할당할 때, 함수를 호출하여 실행하려는 의미입니다. 예를 들어, 아래와 같이 onClick 이벤트 처리기에 함수를 할당할 때 함수가 실행된다.
const handleClick = () => {
console.log('Button clicked');
};
<button onClick={handleClick}>Click me</button>위의 예시에서 handleClick 함수는 클릭 이벤트가 발생할 때마다 실행된다. onClick 이벤트가 트리거되면 handleClick 함수가 호출되어 콘솔에 'Button clicked'가 출력된다.
🔎 함수 자체를 할당하는 것
이벤트 처리기에 함수 자체를 할당할 때는 함수를 호출하지 않고 그 자체를 할당하는 의미이다. 이 경우, 함수 실행은 이벤트가 트리거되었을 때 내부적으로 처리된다.
const handleClick = () => {
console.log('Button clicked');
};
<button onClick={handleClick}>Click me</button>위의 예시에서 handleClick 함수 뒤에 소괄호가 없으므로 함수 자체가 할당된다. 이벤트 처리기에 함수 자체가 할당되면 이벤트가 발생할 때 해당 함수가 내부적으로 실행된다. 이 방식은 함수에 매개변수를 전달해야 할 때 특히 유용하다.
const handleButtonClick = (event) => {
console.log('Button clicked:', event.target);
};
<button onClick={handleButtonClick}>Click me</button>위의 예시에서 handleButtonClick 함수는 클릭 이벤트가 발생할 때 해당 이벤트 객체가 자동으로 매개변수로 전달된다. 이벤트 객체를 활용하여 클릭한 요소의 정보에 접근하거나 추가 작업을 수행할 수 있다.
요약
이벤트 처리기에 함수를 할당할 때 함수 자체를 할당하면 이벤트가 발생할 때 함수가 내부적으로 실행되며, 함수를 호출하여 실행하려면 소괄호 ()를 사용하여 함수를 호출해야 한다. 어떤 방식을 선택할지는 이벤트 처리기의 동작과 매개변수 사용 여부에 따라 달라진다.
