이벤트 리스너를 정리하는 작은 습관

만드는 일과 정리하는 일

화면이 처음 열릴 때만 잘 동작하는 기능은 생각보다 쉽게 만들어진다. 문제는 같은 화면을 두 번 열었을 때다. 닫힌 패널에 연결된 이벤트가 남아 있거나, 하나의 동작이 여러 번 실행되기도 한다.

리스너를 등록하는 코드 옆에 정리 방법도 함께 두면 생명주기를 따라가기가 쉬워진다.

정리 지점을 하나로 모으기

여러 리스너를 한 번에 해제해야 하는 화면에서는 AbortController를 사용할 수 있다. 각 이벤트에 같은 signal을 전달하고 화면이 사라질 때 abort를 호출한다.

const events = new AbortController();

window.addEventListener("resize", updateLayout, {
  signal: events.signal
});

function dispose() {
  events.abort();
}

한 번 더 열어 보기

정상 동작을 확인할 때는 열기와 닫기를 반복한다. 이벤트 횟수, 화면에 남은 요소, 이전 상태가 다음 화면에 영향을 주는지를 함께 본다.

복잡한 추상화보다 작은 정리 함수 하나가 다음 디버깅의 시간을 줄여 주기도 한다.