@HostListener Angular 디렉티브 활용 가이드
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- Angular 프론트엔드 개발자 (중간~고급 수준)
- 디렉티브/이벤트 처리 기술 확장을 원하는 개발자
- Angular 20 버전 기반 구현 사례 포함
핵심 요약
@HostListener
는 디렉티브/컴포넌트 호스트 요소에서 DOM 이벤트를 감지하여 커스텀 로직 실행 가능@HostListener('event', ['$event'])
형태로 템플릿 없이 이벤트 바인딩 가능window:resize
,document:click
,keydown.shift.i
등 글로벌 이벤트 처리 가능- Angular Ivy 컴파일러는
hostBindings
로 하위 레벨 이벤트 바인딩으로 변환
섹션별 세부 요약
1. @HostListener 기본 개념
- 호스트 요소(
태그)에
mouseover
/mouseleave
이벤트 감지 - Directive 클래스 내
@HostListener
사용 예:
```ts
@HostListener('mouseover', ['$event']) mouseOver(event: MouseEvent) { ... }
```
- Renderer2를 통해 CSS 클래스 동적 추가/제거 가능
2. 글로벌 이벤트 처리 예시
window:resize
이벤트 감지:
```ts
@HostListener('window:resize', ['$event']) onResize(event: Event) { ... }
```
document:click
이벤트 감지:
```ts
@HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent) { ... }
```
3. 키보드 단축키 처리
window:keydown.shift.i
이벤트 감지:
```ts
@HostListener('window:keydown.shift.i', ['$event']) onShortcut(event: KeyboardEvent) { ... }
```
- 접근성 기능/단축키 구현에 활용 가능
4. Angular 내부 동작 원리
makePropDecorator
함수를 통해 메타데이터 생성- Ivy 컴파일러로
hostBindings
형태로 하위 레벨 호스트 바인딩 생성 예:
```ts
hostBindings: function About_HostBindings(rf, ctx) { ... }
```
결론
@HostListener
는 템플릿 없이 이벤트 처리를 간결하게 가능하게 함- 재사용 가능한 디렉티브/반응형 레이아웃 구현에 유리
- Angular DI 및 변경 감지와 호환되며, 코드 중복 최소화 가능
@HostListener
사용 시 이벤트 이름/인자 명확히 지정하고, Renderer2를 통해 안정적인 DOM 조작 권장