이벤트 핸들러 this 오류

이벤트 핸들러 this 오류

문제

클래스 안에 있는 메서드를 핸들러로 부착하니 클래스의 멤버 변수들을 찾지 못하는 상황이 발생했다

처음에는 메서드가 프라이빗 메서드라 그런 건가? 싶어서 이리저리 고쳐봤는데, 알고 보니 this가 클래스 인스턴스를 가리키지 않고 이벤트가 걸린 요소를 가리켜서 그런 것이었다

원인

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

MDN 문서에 따르면 이벤트 수신기 (이벤트 핸들러) 의 this는 이벤트가 걸린 대상 요소를 가리키게 된다고 한다 (= e.currentTarget이 가리키는 요소와 같다)

디버깅하느라 별 짓을 다 했는데 이런 이유가 있었다

해결

DOM요소.addEventListener('click', this.핸들러이름.bind(this));

함수에 this를 직접 바인딩해주는 것으로 문제를 해결할 수 있다

또는 인자로 this를 넘겨주거나, 클로저를 활용하면 된다