HostListener & HostBinding

안녕하세요. 꼬동입니다.

 

회사 코드 리팩토링하다가 제대로 알고 있는거 같지않아서, 한 번 글을 써봤습니다.

 

HostListener 와 HostBinding에 관한 글입니다.

---

HostListener

HostListener는 DOM event를 선언하여, 이벤트가 발생했을 때 핸들러 메소드가 실행될 수 있게 제공해주는 데코레이터 입니다.

 

Option	Description
eventName? : string	DOM event (ex : 'click')
args? : string []	메소드에 전달할 인수들

 

@Directive({selector: 'button[counting]'})
class CountClicks {
	numberOfClicks = 0;
    
    @HostListener('click', ['$event.target'])
    onClick(btn) {
    	console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
	}
}

@Component({
	selector: 'app',
    template: <button counting>Increment</button>',
})
class App {}

---

HostBinding

HostListener로 이벤트를 캐치할 수 있는것 처럼, HostBinding으로 DOM property를 binding 할 수 있습니다.

 

공식 홈페이지 기준으로 DOM 속성을 host binding 속성으로 표시하고, 구성 메타데이터를 제공하는 데코레이터라고 하는데,,,,

 

솔직히 뭔 소린지 모르겠고, 그냥 DOM property를 binding 한다는 표현이 더 쉽지 않나요 !?

 

*메타데이터 : 다른 데이터(DOM property)를 설명해주는 데이터(host binding property)

 

Angular는 CD 동안 자동으로 host property를 체크합니다. => 제 생각엔 HostBinding으로 DOM property를 조작해야하는 큰 이유가 아닐까 싶습니다. Angular를 쓴다면,

 

그리고 binding이 변경이 되면 디렉티브의 host element를 업데이트합니다.

 

Option	Description
hostPropertyName?: string	binding을 할 DOM property

 

@Directive({ selector: '[ngModel]'})
class NgModelStatus {
	constructor(public control: NgModel) {}
    
    @HostBinding('class.valid') get valid() { return this.control.valid; }
    @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
}

@Component({
	selector: 'app',
    template: `<input [(ngModel)]="prop">`,
})
class App {
	prop;
}

---

엄;;

 

알아보니 별거 없네요.

 

두 줄 요약도 가능하겠네 ;

 

1. HostListener : Angular에게 이벤트 감지 명령하고, 이벤트 발생하면 지정해 둔 메소드 실행시키는 데코레이터

2. HostBinding : DOM property를 우리 입 맛 대로 조작하기 위해서 Angular에게 제공하는 데코레이터

 

이 정도가 되겠군요.

---

https://ggodong.tistory.com/329

NGRX Store - An Architecture Guide (1)

 

뭐 그러시는 분은 없겠지만, 해당 글 챕터 2 쓰려고 하는데요.

 

너무 길어요. 진짜 엄두가 안나고

 

저 역시도 이해를 먼저 하고 쓰는게 맞는거 같아서

 

무기한 연기합니다.

 

인생의 무게 하편과 같달까 ..

 

전설의 원고

---

이상 HostListener & HostBinding 이었습니다. ^_^