[JavaScript] 이벤트 함수를 callback 함수로 호출

지난번 학교 수업에서 웹 서비스 개발 프로젝트를 진행했는데, 해당 프로젝트 과정에서 자바스크립트 파일 내에서 특정 엘리먼트에 이벤트 함수를 지정하는 코드를 작성했다. 

let new_input = document.createElement('input');
new_input.setAttribute("id", theater);
new_input.setAttribute("type", 'radio');
new_input.setAttribute("value", theater);
new_input.setAttribute("class", 'theater_city');
new_input.setAttribute("name", 'theater_city');
new_input.onclick = theaterCity_onClick(); 		// onClick 이벤트 지정

다음과 같이 코드를 작성했었는데, onclick 함수가 제대로 할당이 안 됐는지 input 태그를 아무리 클릭해도 theaterCity_onClick 함수가 실행되지 않았다. 

다행히 선배의 도움으로 금방 문제를 찾을 수 있었는데, 바로 theaterCity_onClick()에서 괄호를 붙여써서 그런 것이 문제였다. 이렇게 코드를 작성하게 되면, 실제 함수가 호출되는 동시에 실행되어버리고 변수에는 할당되지 않는다. 자바스크립트에서는 이벤트 함수를 등록할 때, 괄호 없이 함수 이름만 작성해야한다. 따라서 위의 코드에서는 다음과 같이 수정하니 input 태그에 이벤트 함수가 제대로 등록되는 것을 확인할 수 있었다. 

 

new_input.onclick = theaterCity_onClick;

 

만약 파라미터를 전달받는 onClick 함수를 할당하는 경우에는 어떻게 해야할까?

theaterCity_onClick(pram) 이런식으로 하면 앞에서 언급한 것과 동일하게 호출과 동시에 실행만 될 뿐, 이벤트 함수로 할당되지 않는다. 이런 경우에는 다음과 같이 콜백함수를 사용해야한다. 

 

new_input.onclick = (pram) => onClick(pram);

콜백함수는 간단하게 설명하자면, 함수를 정의해놓고 실행 도중에 해당 함수를 call 하면 함수 내부 블럭으로 back 하여 실행하는 흐름이다. 그러므로 콜백함수로 변수를 지정하게 되면 바로 실행이 되지 않고, 해당 함수를 call 할 때까지 기다리게 되므로 앞에서 봤던 것과 같은 오류가 발생하지 않는다. 

 

---

 

늘 html, css 위주로 작업을 하다가 자바스크립트로는 처음 프로젝트를 진행해서 그런지 이렇게 구멍이 하나씩 보였다... 무엇보다 단기간에 급하게 자바스크립트 개념을 배운터라 이렇게 기본적인 부분에서 막혀버린 것 같다😥