이벤트 중첩 등록의 함정 removeEventListener로 문제 해결하기

| 안녕하세요, ‘코딩하는곰’입니다! 오늘은 자바스크립트 개발자라면 한 번�은 마주치는 이벤트 중첩 등록 문제와 그 해결법을 깊이 있게 다루어보려고 합니다.
갑자기 버튼 클릭 시 함수가 여러 번 실행되거나, 메모리 사용량이 급증하는 현상을 경험해보셨나요? 이는 removeEventListener 누락이나 위치 오류로 인한 전형적인 증상입니다.
이 글에서는 실제 프로젝트에서 발생할 수 있는 시나리오와 함께 체계적인 해결 방법을 제시드리겠습니다.

|

1. 이벤트 중첩이 발생하는 3가지 주요 상황

이벤트 리스너가 중복 등록되면 단순한 동작도 예측 불가능한 결과를 초래합니다. 주로 다음과 같은 경우에 발생하죠.

1.1 컴포넌트 재렌더링 시

SPA 프레임워크(React, Vue 등)에서 컴포넌트가 리렌더링될 때마다 addEventListener가 호출되는 경우:

function Component() {
  const handleClick = () => console.log('Clicked!');
  document.getElementById('btn').addEventListener('click', handleClick);
  // 컴포넌트 업데이트 시마다 새 리스너 추가
}

→ 해결책: useEffect 클린업 함수 활용

1.2 이벤트 버블링/캡처링 오해

중첩된 DOM 요소에서 이벤트 전파 방식을 고려하지 않은 경우:

parent.addEventListener('click', funcA, true); // 캡처링 단계
child.addEventListener('click', funcA); // 버블링 단계

1.3 동적 요소 생성 시

새로 생성되는 요소에 반복적으로 리스너를 등록하는 경우가 많습니다. 이때는 이벤트 위임 패턴이 효과적이죠.

🔧 새로운 기술을 배우고 싶다면, (자바스크립트 마스터하기) 형 변환의 모든 것 암시적 vs 명시적 변환 완벽 가이드를 참고해보세요.

|

2. removeEventListener의 올바른 사용법

이벤트 제거 실패의 80%는 다음 4가지 원인에서 옵니다.

2.1 동일 함수 참조 필요

// ❌ 실패 케이스
element.addEventListener('click', () => console.log('1'));
element.removeEventListener('click', () => console.log('1')); // 새 함수 인스턴스  
// ✅ 성공 케이스
const handler = () => console.log('2');
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

2.2 캡처링 플래그 일치

element.addEventListener('click', handler, true);
element.removeEventListener('click', handler, true); // 3번째 인자 일치 필수

2.3 라이프사이클 관리

클래스 컴포넌트에서는 componentWillUnmount, 함수형에서는 useEffect 반환 함수에서 처리해야 합니다:

useEffect(() => {
  const handleScroll = () => {};
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

최근 당첨번호와 통계를 한눈에 보고 싶다면, AI 번호 추천과 QR코드 확인이 가능한 지니로또AI를 설치해보세요.

|

3. 실제 프로젝트 적용 사례

3.1 모달 닫기 이벤트 관리

모달이 열릴 때 배경 클릭 이벤트를 등록하지만, 닫힐 때 제거하지 않으면 메모리 누수가 발생합니다.

class Modal {
  constructor() {
    this.handleBackgroundClick = this.close.bind(this);
  }
  open() {
    document.body.addEventListener('click', this.handleBackgroundClick);
  }
  close() {
    document.body.removeEventListener('click', this.handleBackgroundClick);
  }
}

3.2 성능 모니터링 결과

중첩 이벤트 제거 전/후 Chrome DevTools의 Memory 탭에서 확인한 결과:

• 제거 전: 10회 클릭 시 1.2MB → 3.5MB
• 제거 후: 10회 클릭 시 1.2MB → 1.3MB

  3.3 이벤트 위임 최적화

  테이블 행에 이벤트를 개별 등록하는 대신 상위 요소에서 처리하는 예제:

  document.querySelector('table').addEventListener('click', (e) => {
    if (e.target.matches('td')) {
      console.log('Row clicked:', e.target.closest('tr').id);
    }
  });

🍵 면역력과 활력을 챙기고 싶다면 한 번쯤 확인해볼, 리프레씨를 참고해보세요.

| 이벤트 관리는 자바스크립트 성능 최적화의 첫걸음입니다. 오늘 배운 removeEventListener의 정확한 사용법과 이벤트 위임 패턴을 프로젝트에 적용해보세요.
혹시 실제 개발 중 마주친 특이한 케이스가 있으면 댓글로 공유해주세요! 다음 포스팅에서는 이벤트 루프와 태스크 스케줄링에 대해 깊이 파헤쳐보겠습니다.
곰발자국(구독👍) 남겨주시면 더 유용한 콘텐츠로 찾아뵙겠습니다!

로또 번호 선택이 어려울 때는, AI가 분석한 번호 추천과 통계 정보를 제공하는 지니로또AI를 활용해보세요.