[Angular] HostListener vs HostBinding

Angular에서는 view의 DOM에 대한 내용을 처리하는 Directive라는 개념이 있다.

Angular가 기본적으로 제공되는 directive도 있으며,

사용자가 필요에 따라 커스텀하게 만들 수 있다.

이 포스팅에서는 기본 제공되는 여러 directive 중 

@HostListener와 @HostBinding에 대해 비교해보려 한다.

(왜냐면 내가 헷갈렸기 때문이다ㅠ) 

결과적으로 보면 이름은 비슷한데,

하는 내용은 완전히 다르다.

예시를 각각 보면서 확인해보자.

HostListener 예시

@HostListener('click', ['$event.target'])

onClick(target) {

console.log('click!', target);

}

HostListener 디렉티브는

첫번째 parameter로는 이벤트명을 받고

두번째 parameter는 이벤트 타겟을 받는다. (생략 가능)

예시에서 볼 수 있듯이 HostListener는

이벤트 핸들링과 관련된 디렉티브다.

위의 예시는 

클릭 이벤트에 대한 이벤트 핸들링을 해주는 예시인 것이다.

HostBinding 예시

@HostBinding('class.valid') get valid() {

return this.control.valid;

}

HostBinding 디렉티브는 

첫번째 parameter로 element의 속성 값을 받는다. (생략 가능)

Angular에서는 자동적으로 element의 속성 값의 변화를 자동적으로 감지하고 있다.

@HostBinding은 지정된 속성 값이 바뀌면 

해당 element를 업데이트해주는 역할을 한다.

즉, 위의 예시는 

해당 컴포넌트에 대해 valid 라는 클래스가 있으면 

this.control.valid 값을 리턴해주는 내용의 예시인 것이다.