addEventListener & removeEventListener

Q. 팀 프로젝트를 진행하다가 멘토님께서 코드리뷰를 해주셨는데 addEventListener를 작성하고 removeEventListener를 해주라고 하셨는데 메모리 문제 때문이라고 하셨는데 그렇게 큰 차이가 있나요?

 

A. 페이지나 DOM을 아예 나가는거면 상관없고 SPA특성이라서 해주는게 좋다.

대충 SPA는 페이지를 나가지 않기때문에 이벤트리스너가 쌓이게돼서 난 한가지 이벤트만 실행시키면 되는데 다른 이벤트리스너가 폭죽놀이하면서 두둥탁 하는 경우가 생길 수 있다.

dom과 event listener가 상호 참조하는 경우 삭제해주지 않으면 상호 참조로 reference count가 0이 되지 않아서 영구히 남는 문제가 있다.

addEventListenr(name, function)을 호출하면 시스템 내부에 해당 이벤트 호출이 발생한 경우 listeners 목록을 돌면서 이벤트를 각 listener에게 투사해준다.
그래서 function이 호출되는 건데, 이 addEventListener를 하고 removeEventListener을 안하면 internal에 계속 listeners 목록이 증가하게 된다
만약 자주 쓰이는 컴포넌트에서 발생하는 문제면 순식간에 listeners 목록이 증가하여 성능 저하 등의 문제가 발생한다.
이에 따라 removeEventListener로 등록된 listener을 삭제해줘야 한다.