Angular에서 @HostBinding()와 @HostListener()는 무엇인가요?

@HostListener와 @HostBinding 이해하려면 Angular 지시문에 대한 기본 지식이 있어야 합니다. Angular 에는 세 가지 유형의 지시문이 있습니다.

1. 요소
2. Attribute Directive
3. 구조 지침

컴포넌트와 디렉티브의 기본적인 차이는 컴포넌트는 템플릿을 가지는 반면, 속성이나 구조적 디렉티브는 템플릿이 없다는 점입니다. 이 두 개념을 이해하기 위해, 간단한 커스텀 속성 명령어를 만드는 것부터 시작해 보겠습니다. 아래 지침은 호스트 요소의 배경색을 변경합니다:

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
 
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.ChangeBgColor('red');
    }
 
    ChangeBgColor(color: string) {
 
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

커스텀 속성 디렉티브를 만들려면 클래스를 만들고 @Directive로 장식해야 합니다. 지시문 클래스의 생성자에서 ElementRef와 Renderer 객체를 주입합니다. 호스트 요소와 렌더러의 참조를 얻기 위해 이 두 클래스의 인스턴스가 필요합니다.

아래 목록과 같이 위의 속성 지침을 컴포넌트 템플릿에 사용할 수 있습니다:

<div appChbgcolor>
    <h3>{{title}}</h3>
</div>

여기서 호스트 요소를 담은 컴포넌트 클래스는 다음과 같이 생성됩니다:

import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Hey ng Developer ! ';
}

현재 appChbgcolor 지시는 호스트 요소의 색상을 변경합니다.

@HostListener() decorator

Angular 에서는 @HostListener() 함수 데코레이터가 지시문 클래스 내 호스트 요소의 이벤트를 처리할 수 있게 해줍니다.

다음 조건을 생각해 봅시다: 호스트 요소에 마우스를 올리면 호스트 요소의 색상만 변해야 합니다. 또한, 마우스가 사라지면 호스트 요소의 색상이 기본 색상으로 바뀌어야 합니다. 이를 위해서는 지시적 클래스에서 호스트 요소에서 발생한 이벤트를 처리해야 합니다. Angular 에서는 @HostListener()를 사용해 이 작업을 수행합니다.

더 잘 이해하기 위해 @HostListener()를 더 잘 이해하기 위해 또 다른 간단한 상황을 생각해 보세요: 호스트 요소를 클릭할 때 알림 창을 보여주고 싶습니다. 지시적 클래스에서 이를 수행하려면 @HostListener()를 추가하고 이벤트 '클릭'을 전달하세요. 또한, 아래 목록에 나와 같이 알림을 발생시키는 함수를 연동하세요:

@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}

Angular 에서는 @HostListener() 함수 데코레이터가 지시문 클래스 내에서 호스트 요소에서 발생한 이벤트를 매우 쉽게 처리할 수 있게 해줍니다. 마우스가 떠 있을 때만 빨간색으로 색상을 바꿔야 하고, 마우스가 사라지면 호스트 요소의 색이 검은색으로 변해야 한다는 요구사항으로 돌아가 보겠습니다. 이를 위해서는 지시문 클래스 내 호스트 요소의 마우스enter와 마우스엑시트 이벤트를 처리해야 합니다. 이를 위해 appChbgcolor 지시형 클래스를 아래에 보이는 대로 수정하세요:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
 
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
 
    constructor(private el: ElementRef, private renderer: Renderer) {
        // this.ChangeBgColor('red');
    }
 
    @HostListener('mouseover') onMouseOver() {
        this.ChangeBgColor('red');
    }
 
    @HostListener('click') onClick() {
        window.alert('Host Element Clicked');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.ChangeBgColor('black');
    }
 
    ChangeBgColor(color: string) {
 
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

지시적 클래스에서는 마우스 엔터와 마우스 엑시트 이벤트를 처리합니다. 보시다시피, 우리는 @HostListener()를 사용해 이 호스트 요소 이벤트를 처리하고 함수를 할당하고 있습니다.

그럼 지시문 클래스 내 호스트 요소의 이벤트를 처리하기 위해 @HostListener() function decorator를 사용해 보겠습니다.

@HostBinding() decorator

Angular 에서는 @HostBinding() 함수 데코레이터를 통해 지시문 클래스에서 호스트 요소의 속성을 설정할 수 있습니다.

예를 들어 높이, 너비, 색상, 여백, 테두 등 스타일 속성을 변경하고 싶다고 가정해 봅시다.  또는 지시문 클래스 내 호스트 요소의 다른 내부 속성들. 여기서는 @HostBinding() decorator 함수를 사용해 호스트 요소의 속성에 접근하고 지시형 클래스에서 값을 할당해야 합니다.

@HostBinding() 데코레이터는 명령어에서 할당하고자 하는 호스트 요소 속성의 이름이라는 하나의 매개변수를 받습니다.

우리 예시에서 호스트 요소는 HTML div 요소입니다. 호스트 요소의 테두리 속성을 설정하고 싶다면, 아래에 보이는 @HostBinding() decorator를 사용해 설정할 수 있습니다:

@HostBinding('style.border') border: string;
 
@HostListener('mouseover') onMouseOver() {
    this.border = '5px solid green';
}

이 코드를 사용하면, 마우스 마우스를 올리면 호스트 요소의 테두리가 초록색의 단색 5픽셀 너비로 설정됩니다.  따라서 @HostBinding 데코레이터를 사용하면 지시적 클래스에서 호스트 요소의 속성을 설정할 수 있습니다.

이 게시물이 마음에 드시나요?

자, 이게 전부입니다! 이 글이 마음에 드셨다면 꼭 공유해 주세요. 또한, 아직 Infragistics Ignite UI for Angular Components를 확인하지 않으셨다면 꼭 확인해 보세요! 30+ 자료 기반 Angular 컴포넌트를 제공해 빠른 웹 앱을 더 빠르게 코딩할 수 있도록 도와줍니다.