Directive
이번 포스트에서는 Angular의 Directive에 대해서 알아보겠습니다. 지금까지 예제를 작성하면서 여러 directive를 사용해 왔는데요. 그에 대해서 조금 더 정리를 해 보려 합니다.
Directive는 DOM의 모양이나 동작을 지시하기 위한 명령이라고 생각하시면 됩니다. 크게 HTML Element형태로 사용되거나 Element의 attribute의 형태로 사용되게 됩니다. 예를 들면 우리가 사용했던 ngIf 같은 attribute를 떠올리시면 됩니다. Routing에서 사용했던 <router-outlet></router-outlet> Element 역시 directive입니다.
이렇게 directive는 DOM을 제어하기 위한 용도로 사용되는데 DOM을 제어하기 위해서 우리는 지금까지 Component를 이용했었습니다. Component로 제어하면 되지 굳이 directive로 DOM을 제어할 필요가 있느냐 하는 의문이 들 수 있습니다. 하지만 Component는 원칙적으로 자신이 rendering하는 View에 대해서만 관심이 있습니다. 여러 View들이 공통적으로 사용하는 Element나 Element의 attribute같은 것들을 따로 directive로 지정해 사용하면 SRP관점에서 봤을 때도 타당하고 Component의 복잡도를 낮출 수 있으며 유지보수와 같은 관리적인 측면에서도 더 나은 형태로 구현이 가능합니다.
Component 역시 큰 의미에서 directive입니다. Component는 directive이면서 View를 가지고 있고 자식 Component 또한 가질 수 있습니다. 하지만 directive는 View를 가지고 있지 않고 자식 directive 또한 가질 수 없습니다.
Directive는 크게 다음과 같은 4가지 종류로 구분 할 수 있습니다.
Component Directive
우리가 알고 있는 Component입니다. selector에서 우리가 directive를 지정해 사용하게 됩니다.
Attribute Directive
HTML Element의 Attribute로 사용됩니다. built-in 형태로는 ngClass 같은 것들이 있습니다.
Structural Directive
DOM의 구성을 제어하기 위한 directive로 ngIf , ngFor, ngSwitch 등이 있습니다.
Custom Directive
built-in 형태로 만들어진 directive가 아닌 직접 만들어서 사용하는 directive를 지칭합니다.
이 중 Component에 대해서는 많이 사용해 봤으니 Structural Directive와 Custom Directive에 대해서 알아보도록 하겠습니다.
Structural Directive
우리 예제에서도 사용했던 ngIf, ngFor등을 지칭합니다. 단, 이것들은 built-in된 형태입니다. 이런 구조적 directive를 우리가 직접 만들어서 사용할 수도 있습니다. ngIf와 ngFor를 사용하실 때 몇가지 알아두셔야 하는 사항이 있습니다.
일반적으로 다음과 같이 코드처리 합니다.
<div *ngIf="hero" class="name"></div>
hero가 null과 undefined가 아니면 <div>를 DOM에 추가하고 interpolation을 이용해 값을 출력하는 코드입니다.
이 코드는 사실 다음과 같이 변형되어서 실행됩니다.
<ng-template [ngIf]="hero">
<div class="name"></div>
</ng-template>
ng-template을 이용해서 조건을 통해 <div>의 처리를 결정합니다.
비교해서 보셔야 할 것으로 ng-container가 있습니다. 위의 코드는 다음의 코드로 표현이 가능합니다.
<ng-container *ngIf="hero">
<div class="name"></div>
</ng-container>
Angular는 동일한 Element에 두개 이상의 *ngIf, *ngFor, *ngSwitch를 사용할 수 없습니다. for문을 돌리면서 if문을 이용해 비교하고 싶은 경우에는 문제가 됩니다. 이 같은 경우를 해결하기 위해 ng-container를 제공하는 것이라 보시면 됩니다.
Custom Directive
기존에 만들었던 mySearchProject에 간단하게 Custom Directive를 추가하고 어떻게 이용하는지 살펴보도록 하겠습니다.
command 창을 열고 다음의 명령을 실행해서 directive를 하나 생성합니다. 현재 command 창의 working directory는 src/app 입니다.
ng generate directive textColor
두개의 파일이 생성됩니다. Angular CLI의 이름규칙에 의해 text-color.directive.ts 라는 이름의 파일이 생성됩니다.
그 내용을 다음과 같이 수정합니다.
import {Directive, ElementRef, Renderer2} from '@angular/core';
@Directive({
selector: '[myColor]'
})
export class TextColorDirective {
constructor(elementref: ElementRef, renderer: Renderer2) {
renderer.setStyle(elementref.nativeElement,'color','darkred');
}
}
위의 directive 내용은 HTML Element의 속성으로 myColor 가 사용되었을 경우 해당 Element를 DOM에 rendering 할 때 글자색을 darkred로 설정하라는 것입니다.
이렇게 directive를 생성하면 사용하기 위해서 Root Module에 등록해야 합니다. Angular CLI를 이용했기 때문에 이미 등록이 되어 있습니다. 이제 실제 해당 directive가 정상적으로 동작하는지 확인해보면 될 듯 합니다.
pages/home 폴더에 있는 home.component.html을 수정해서 해당 directive를 사용해 보죠.
<h1>HOME</h1>
<hr>
<p myColor>이 Web Application은 Angular 강좌를 위한 Test App입니다.
<p>이 강좌는 다음의 내용을 포함합니다. </p>
<ul>
<li>Angular의 기본 구조</li>
<li>Angular CLI</li>
<li>Component</li>
<li>Template - Template Reference Variable</li>
...
...
...
위와 같이 myColor라는 directive를 사용할 수 있습니다. 해당 P Element의 text 글자는 darkred로 출력되겠네요.
가장 직관적인 예를 들기 위해 text color를 변경하는걸로 처리를 했는데 그 외 DOM을 제어하는 다른 기능들도 할 수 있습니다.
이번에는 이벤트 처리를 한번 해 보죠. 위의 예에서 해당 P Element를 클릭했을 때 alert()이 수행되게 할려면 다음과 같이 처리하시면 됩니다.
import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';
@Directive({
selector: '[myColor]'
})
export class TextColorDirective {
@HostListener('click', ['$event']) elementClick(e) {
// e안에는 event객체가 들어온다.
// this는 directive 객체를 지칭.
alert(e.srcElement.innerHTML)
}
constructor(elementref: ElementRef, renderer: Renderer2) {
renderer.setStyle(elementref.nativeElement,'color','darkred');
}
}
이벤트를 처리하기 위해 @HostListener decorator를 이용했습니다. 여기서 host라는 표현이 나오는데 지금 우리 예제에서 myColor 속성을 적용한 HTML Element를 host라고 지칭합니다.
이벤트 객체를 얻기 위해 처리하는 부분을 조심해서 보시면 됩니다.
추가적으로 @Input decorator를 이용해서 directive가 값을 전달 받을 수 있습니다. 원래 @Input은 부모 Component가 자식 Component 에게 데이터를 전달해 주기 위해 사용했었는데 directive에게도 값을 전달 할 수 있습니다. 사용하는 Component때 했던 것과 동일합니다.
이번 포스트는 Directive에 대해서 정리해보았습니다. 더 많은 기능이 있지만 기본적으로 이런 용도로 사용된다는 정도만 알고 계시면 될 듯 합니다.
