[VanillaJS] addEventListener, 콜백 함수 알아보기

이번 포스팅에선 VanillaJS에서 굉장히 많이 쓰이는 addEventListener, 그리고 이벤트리스너 함수에서 빠뜨릴 수 없는 콜백함수에 대해 알아본다.

콜백함수는 바닐라js 뿐만 아니라 js를 사용하는 모든 프레임워크(react, vue, angular, ...)에서 굉장히 중요한 개념이므로 꼭 제대로 알아두어야 한다!

---

addEventListener, 콜백함수

특정 이벤트가 발생했을 경우를 선택해주는 함수이다.

이렇게 용어를 보기만 해선, 전혀 무슨 소리인지 모를 것이기 때문에 바로 예시로 들어간다.

 

input 요소에 글자를 입력할 때마다 현재 입력된 글자가 무엇인지 알려주는 프로그램을 만들어보자.

아래 코드를 보자.

    document.querySelector('input').addEventListener('input', (event)=>{
      console.log('입력한글자: ', event.target.value);
    });

input 태그에 글자를 입력한다.

querySelector로 input 태그를 선택해주었다. input 태그가 하나뿐이므로 querySelector로 작성하였다.

만약 querySelector가 무엇인지 모른다면 아래 포스팅을 참고하자.

https://kth990303.tistory.com/168

[VanillaJS] html 태그를 선택하는 querySelector에 대해 알아보자

 

우리가 지금 하려는 것은 저 input요소의 변경이 일어날 때마다 알려주는 것을 만드려 하므로, input 요소가 변경될 때마다 EventListener가 파악해주면 좋을 듯하다.

 

addEventListener함수는 이 input태그에서 특정 이벤트 'input'이 발생했을 때 파악해주는 함수이다.

input 이벤트는 텍스트 요소가 변경되었을 때 발생하는데, 이 때마다 현재 글자를 알려줄 수 있게 addEventListener로 'input' 이벤트가 발생할 때마다 파악할 수 있게 해주었다.

 

그럼 이 (event) => {} 이건 무엇이냐,

여기서 콜백함수의 개념이 설명된다.

 

콜백함수는 어떤 사건이 발생한 다음에 연이어 작동하는 함수이다. 

 

다시 위의 코드를 보자.

    document.querySelector('input').addEventListener('input', (event)=>{
      console.log('입력한글자: ', event.target.value);
    });

'input' 이벤트 바로 다음에 화살표 함수를 넣어주지 않았는가?

위와 같이 함수 안에 익명함수가 들어간 경우를 콜백함수라 하는데, 위와 같이 코드를 짤 경우 input 요소가 변경된 직후에 화살표함수가 실행되게 된다.

이벤트리스너에서 받은 이벤트에는 여러 요소들이 있는데, 그 중 event.target.value는 이벤트의 값을 의미한다.

즉, input 태그에서 입력할 때마다 입력된 문자열을 가지고 있는 셈이다.

 

위 함수를 실행하면 아래와 같이 된다.

글자를 입력할 때마다 콜백함수가 실행된다.

또한, 콜백함수는 아래와 같이 작성할 수도 있다.

const onClick = () => {
	console.log('버튼 클릭');
}
document.querySelector('button').addEventListener('click', onClick);

원래 익명함수였던 콜백함수를, onClick 변수에 담았다.

그 다음, addEventListener함수에 'click' 이벤트가 발생할 때마다 onClick함수 (콜백함수)를 호출하게 하였다.

위와 같이 변수에 담은 다음 호출하게 할 수도 있다.

 

 

주의할 점은, addEventListener('click', onClick()); 과 같이 onClick()으로 작성하면 안된다.

()를 붙이게 되면 그 즉시 함수를 수행하는데, 우리는 버튼을 누를 때만 onClick이 수행되길 원하지만, 버튼을 누르기도 전에 처음 렌더링될 때 바로 함수가 수행될 것이다.

정작 버튼을 누를 때엔, onClick 함수에서 생략된 undefined가 리턴돼 아무것도 실행이 되지 않는다.

(기본적으로 함수에서 아무것도 리턴을 하지 않을 땐 undefined를 리턴한다.)

---

마치며

만약 더 다양한 addEventListener에 등록할 수 있는 이벤트를 알아보고 싶다면 아래 블로그의 포스팅을 참고하자.

https://yoonjong-park.tistory.com/entry/addEventListener-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A6%AC%EC%8A%A4%EB%84%88-%EC%A2%85%EB%A5%98

addEventListener 이벤트리스너 종류

 

도움이 된 영상: 조현영님의 ES2021 자바스크립트 강좌