브라우저 환경에서의 이벤트 처리 고급 패턴
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- JavaScript 개발자 (중급~고급)
- SPA, 프레임워크(React/Angular) 및 RxJS 사용자
- 성능 최적화와 이벤트 관리에 관심 있는 개발자
핵심 요약
- 이벤트 위임 (
addEventListener
+useCapture
)을 통해 메모리 효율적 관리 가능 - Throttling/Debouncing으로
scroll
,resize
등 고주파 이벤트 최적화 - 커스텀 이벤트 (
CustomEvent
)를 활용한 모듈화된 컴포넌트 설계 - RxJS를 통한 반응형 이벤트 스트림 처리 (예:
fromEvent
,throttleTime
)
섹션별 세부 요약
1. 이벤트 처리 역사와 DOM 이벤트 모델
- 초기 JavaScript는
onclick
,onchange
등 간단한 이벤트 처리만 제공 - DOM 이벤트 모델: 캡처링(상위 요소 → 하위 요소) → 버블링(하위 요소 → 상위 요소) 2단계
addEventListener
의useCapture
파라미터로 이벤트 흐름 제어 가능
2. 이벤트 위임 패턴
- 부모 요소에 단일 이벤트 리스너를 등록하여 자식 요소의 이벤트를 처리
e.target.matches('.child')
로 동적으로 생성된 요소에도 적용 가능- 주의사항:
stopPropagation()
사용 시 이벤트 전파 중단으로 버그 유발 가능성
3. Throttling/Debouncing 기법
- Throttling: 특정 시간 간격(
limit
) 내 이벤트 한 번만 실행 (예:scroll
이벤트) - Debouncing: 마지막 이벤트 호출 후 지정 시간(
wait
)이 지나면 실행 (예:resize
이벤트) - 코드 예시:
```javascript
function throttle(func, limit) { ... }
function debounce(func, wait) { ... }
```
4. 커스텀 이벤트 생성과 활용
CustomEvent
를 사용하여 모듈화된 이벤트 처리 가능- 예:
```javascript
const event = new CustomEvent('myEvent', { detail: { key: 'value' } });
document.dispatchEvent(event);
```
5. 프레임워크 vs. Vanilla JS vs. RxJS
- Vanilla JS: 가볍지만 수동 리스너 관리 필요
- 프레임워크(React/Angular): 합성 이벤트(
synthetic events
)로 브라우저 호환성 관리 - RxJS:
fromEvent
,throttleTime
으로 복잡한 이벤트 스트림 처리 (예:click
이벤트 위치 추적)
6. 성능 고려사항
- 리스너 수 줄이기: 이벤트 위임 활용
- 메모리 관리:
removeEventListener
로 불필요한 리스너 제거 (메모리 누수 방지) - 브라우저 호환성: MDN Web Docs 참조 필요
7. 디버깅 전략
- 이벤트 브레이크포인트: Chrome DevTools의 Sources 패널에서 설정
- 커스텀 로깅:
console.log
로 이벤트 흐름 추적 - 성능 모니터링: Performance 탭으로 이벤트 핸들러 병목 지점 분석
결론
- 이벤트 위임, Throttling/Debouncing, 커스텀 이벤트, RxJS 활용으로 효율적인 이벤트 처리 가능
- 메모리 누수 방지를 위해 removeEventListener
사용 필수
- 권장: MDN Web Docs, RxJS 문서, "Advanced JavaScript: Understanding the Weird Parts" 참조하여 실무 적용
- 예시: throttle(window.addEventListener('scroll', ...))
로 스크롤 이벤트 최적화