"역시 잘 모르겠으면 mdn 공식문서를.."
정말 하얗게 불태운 하루였습니다. 한 달 전쯤 부트캠프 발표가 나던 날에도 그렇게 깊게 자지 못하고 자꾸 잠에서 깼었는데요. 오늘 새벽도 뭔가 부담이 되었는지 계속 선잠을 자게 되더라구요. 그렇게 초조한 마음으로 시작하게 된 HA 는 종료 5분 전인 5시 55분까지도 마지막을 알 수 없을만큼 긴박함 그 자체였습니다.
평소에는 조금만 고민하면 이렇게 저렇게 접근하면 되겠다 아이디어가 떠올랐었고 그래도 모르겠으면 얼마든지 구글링으로 접근방법을 알 수 있었는데, 오늘은 어쩜 그렇게 자꾸 멍해지고 꽉 막히는 느낌이 나던지 진짜 알다가도 모를 일입니다. 특히 페어 프로그래밍이 진짜 엄청나게 도움이 많이 된다는 걸 격하게 실감하는 하루였습니다. 페어의 존재는 진짜 그 자체로 코딩하는데 효율을 정말 100% 정도는 더 올려주는 것 같습니다.
시험을 좋아하는 사람은 거의 없겠지만, 그래도 지난 5 주간 배운 것들을 돌아보고 점검하는 시간이 되었던 것 같습니다. 그동안 복습이 취약했던 부분들이 어김없이 드러나는 걸 알 수 있었거든요. 특히나 리액트도 그렇고 DOM 도 그렇고 event 관련한 부분이 제가 너무 약하다는 걸 알게 되었습니다.
그래서 그런 김에 오늘은 addEventListener, 특히 그 중에서도 익명 함수를 활용해 매개변수를 전달하는 방법에 대해 짧게 정리해보려고 합니다. 언제나 그렇듯 가장 먼저 참고해야 할 자료는 mdn 공식 문서겠죠. 실제로 오늘 문제를 풀다가 결국 찾아낸 해결책은 다 공식 문서를 통해서였기도 합니다.
addEventListener 의 설명을 보면 "지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정" 한다고 되어있습니다. 한 번 이해하고 나서 다시 보면 뭘 말하는 건지 이해가 되는데 처음 볼 때는 이게 무슨 말인가 싶죠. addEventListener 메서드는 다음과 같은 모양으로 작성하고 동작합니다.
이벤트를 적용할 타겟.addEventListener('이벤트명', '리스너');
세부적인 옵션이 더 있지만 기본적으로는 이런 구조입니다. 타겟이 되는 변수에 연결해 addEventListener 메서드를 호출하고, 괄호 안에 이벤트명에는 click 이나 keyup 과 같은 것들(그리고 그 외에도 엄청나게 많은)이 들어갑니다.
그렇다면 리스너 자리에 들어가야 하는 건 무엇일까요? 공식문서에서는 이 자리에 EventListener 인터페이스 또는 JavaScript function 이 들어간다고 하고 있는데요. 오늘 저는 익명 함수를 활용해 매개변수를 전달하는 방법을 공부한 거라서 listener 자리에 익명 함수 (Javascript function) 가 들어가는 형태에 대해서 조금 더 정리해 보도록 하겠습니다.
<a>hello world</a>
let anchor = document.querySelector('a');
function textChange(text) {
return anchor.textContent = text;
}
anchor.addEventListener('click', textChange('code states');처음에 제가 접근했던 방식은 위에 적은 것처럼 listener 의 자리에 textChange 라고 하는 함수를 바로 집어넣는 것이었습니다. listener 의 자리에 함수와 매개변수를 각각 넣으면 원하는 값을 전달할 수 있을 거라고 생각했던 겁니다.
문제는 이렇게 해서는 클릭이 발생했을 때 원하는 것처럼 매개변수를 전달해서 함수가 동작하지 않는다는 겁니다. 대신에 공식 문서는 익명함수 또는 화살표함수를 이용해 매개변수를 전달하도록 안내하고 있습니다. 그 방식은 다음과 같습니다.
anchor.addEventListener('click', function(){textchange('code states')}); // 익명함수
anchor.addEventListener('click', () => {textChange('code states')}); // 화살표함수이렇게 작성하면 a 태그가 감싸고 있는 'hello world' 를 대상으로 클릭이 발생할 때, 'code states' 로 정상적으로 바뀌는 것을 알 수 있습니다. 자세한 동작 기전을 아직 알지는 못해도 최소한 이렇게 하면 잘 작동한다는 건 알게 되었습니다.
위의 식에서 익명함수와 화살표함수는 같은 방법으로 동작하지만, 두 함수는 서로 다른 this 바인딩을 갖는다고 하네요. 저는 아직 소화하지 못하는 내용입니다만, 관심이 있으신 분들을 위해 아래에 해당 설명을 인용해두었으니 보시고 더 자세한 것은 공식 문서를 참고하시면 되겠습니다.
화살표 함수와 익명 함수는 유사하지만 서로 다른 this바인딩을 가집니다. 익명(모든 전통적인 자바스크립트 함수)는 그들 자신의 this 바인딩을 만들지만, 화살표 함수는 포함하고 있는 함수의 this바인딩을 상속합니다.
즉, 화살표 함수를 사용할 때 포함하고 있는 함수에서 사용중인 변수 및 상수를 이벤트 핸들러에서 사용할 수 있습니다.
