@HostBinding과 @HostListener는 무엇을 하나요?

Question

Accepted Answer

이 decorator들은 directive나 컴포넌트가 자신의 **호스트 요소**(directive가 위치한 요소, 또는 컴포넌트 자신의 루트 요소)를 조작하고 그에 반응하게 해줍니다. `@HostBinding`은 호스트에 프로퍼티/속성을 설정하고, `@HostListener`는 호스트의 이벤트를 수신합니다. ## @HostBinding — 호스트 프로퍼티/속성에 바인딩 ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // 호스트에 CSS 클래스 토글 @HostBinding("style.color") color = "black"; // 인라인 스타일 바인딩 @HostBinding("attr.role") role = "button"; // 속성 설정 } ``` `@HostBinding`은 호스트 요소의 클래스/스타일/속성/프로퍼티를 컴포넌트 필드에 reactive하게 바인딩합니다. 필드를 변경하면 호스트가 업데이트됩니다. ## @HostListener — 호스트 이벤트에 반응 ```ts import { Directive, HostListener, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("style.background") bg = ""; @HostListener("mouseenter") onEnter() { this.bg = "yellow"; // 필드를 변경하면 HostBinding을 통해 호스트가 업데이트됨 } @HostListener("mouseleave") onLeave() { this.bg = ""; } @HostListener("click", ["$event"]) onClick(event: MouseEvent) { console.log("host clicked", event); } } ``` `@HostListener`는 호스트의 DOM 이벤트를 구독합니다(그리고 `$event`와 다른 인수를 받을 수 있습니다). 함께라면 directive가 완전히 독립적일 수 있습니다. 호스트의 이벤트를 수신하고 호스트의 외형을 reactive하게 업데이트합니다. ## 완전한 예제: hover 강조 ```text

Hover me

→ mouseenter가 onEnter() 발생 → bg='yellow' 설정 → @HostBinding이

의 배경 업데이트 → mouseleave가 onLeave() 발생 → 지움 ``` ## host 메타데이터 대안 ```ts @Directive({ selector: "[appHighlight]", host: { // 동등, 메타데이터에 선언 "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## 왜 중요한가 `@HostBinding`과 `@HostListener`는 **directive**가 자신의 호스트 요소와 상호작용하는 표준 도구입니다. 클래스/스타일/속성을 추가하고 이벤트에 선언적으로 반응하며, `ElementRef.nativeElement`를 수동으로 잡거나 리스너를 연결할 필요가 없습니다. 재사용 가능한 동작 directive(강조, 툴팁, 드래그 가능, 접근성 위젯)를 깔끔하게 만드는 데 필수적이며, 수동 DOM 코드가 관리해야 할 change detection과 리스너 정리를 자동으로 처리합니다.