앵귤러 튜토리얼(Angular tutorial) - 31 : 디렉티브 활용

저번시간까지 라우터, 모듈 등에 대해서 살펴보았습니다.
이번시간에는 디렉티브(directive)에 대해서 동작원리를 살펴보려고 합니다.
디렉티브는 일반적으로 html 페이지에서 사용하며 자주 사용한 디렉티브(지시자)로는 ngIf나 ngFor등이 있었습니다.
디렉티브(지시자)를 활용하면 화면을 구성할 때 매우 편리하게 만들수가 있었습니다.

이러한 디렉티브(지시자)는 사용자에 의해서 만들수도 있습니다.
앵귤러의 규칙답게 디렉티브 데코레이터와 class파일을 통해서 지시자를 만들수가 있습니다.
프로젝트는 새로 만들거나 아니면 기존 프로젝트를 이어서해도 상관 없습니다.

여기서는 fiveStudy프로젝트를 그대로 사용하였습니다.

아래 명령어를 입력하여 봅니다.
* 명령어를 통해 만든 디렉티브는 모듈에 자연스럽게 추가가 됩니다.
ng generate directive helloworld

무언가 만들어졌습니다.

 

디렉티브 데코레이터를 포함한 클래스를 간단하게 디렉티브라고 부르겠습니다.
한번 살펴보도록 하겠습니다.
* 대상 : helloworld.directive.ts

import { Directive } from '@angular/core';

@Directive({
  selector: '[appHelloworld]'
})
export class HelloworldDirective {

  constructor() { }

}

 

디렉티브로 만드는 클래스는 기존에 우리가 작업하던 컴포넌트 모듈과는 조금 다른 방식으로 작업을 해야 합니다.
일반적으로 앵귤러에서는 Dom에 직접 접근하지 않고 기능을 만듭니다.
이전시간의 내용을 아무리 살펴보아도 Html의 테그에 직접 접근해서 대상을 가져오는 코드는 없습니다.

그러나 디렉티브는 Html에서의 테그(Element)에게 기능을 부여하거나 표현하는데 사용됩니다.
그러므로 디렉티브를 만드는 경우에는 이러한 Dom에 접근하여 기능을 부여하는 코드가 들어가게 됩니다.
이번에 만들 기능은 생성자를 통해서 디렉티브가 선언된 테그의 정보를 가져오고, 이벤트를 부여하는 방법을 적용하려 합니다.

여기서 보이는 selector는 html파일에서 해당 이름으로 사용되어 집니다.

 

helloworld디렉티브의 내용을 천천히 수정하여 봅니다.

* 대상 : helloworld.directive.ts

import { Directive, ElementRef } from '@angular/core';
import { HostListener } from '@angular/core';
@Directive({
  selector: '[appHelloworld]'
})
export class HelloworldDirective {

  constructor(private el: ElementRef) {  //대상 엘리먼트(Html 테그, Html element)
    
  }

  @HostListener('mouseenter') onMouseEnter() {  //마우스가 들어오면
    this.changeCss('blue');
  }
  
  @HostListener('mouseleave') onMouseLeave() {  //마우스가 나가면
    this.changeCss(null);
  }

  private changeCss(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
    this.el.nativeElement.style.fontWeight = color? 'bold': 'normal';
  }
}

 

ElementRef는 대상의 Dom객체의 속성을 가지고 있는 기능입니다.
HostListener는 데코레이터 이며 이벤트를 감지하는 데 사용됩니다.
코드를 보면, 생성자로 Dom객체의 속성을 받고 HostListener의 마우스 이벤트를 통해서 대상 엘리먼트의 css스타일을 바꾸는 내용입니다.
위 코드를 기존에 만들었던 test컴포넌트html에 적용하여 보겠습니다.

* 대상 : test.component.html

<p>test works!</p>
<p appHelloworld>얼럿 모듈이 들어왔습니까 : {{test_name}}</p>
<input type='button' value='테스트' (click) ='test()'/>
<app-alert [name] ='test_name' (sendToEvent)='getEvent($event)'></app-alert>

 

helloworld디렉티브는 이미 app모듈에 등록되어 있으므로 바로 동작할 것입니다.
마우스를 한번 올렸다가 떼 보도록 합니다.

마우스 움직임에 대해서 동작하는 디렉티브가 만들어졌습니다.

 

예상한 결과가 동작하는 것을 볼 수 있습니다.
또한 ngIf나 ngFor 구조 디렉티브처럼 값을 전달할 수도 있습니다. 
저번시간에 우리가 직접만든 모듈에 값을 전달한 방법과 동일한 방법을 사용하면 가능 합니다.

* 대상 : helloworld.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { HostListener } from '@angular/core';
@Directive({
  selector: '[appHelloworld]'
})
export class HelloworldDirective {

  @Input() colorCode: string;  //인풋!

  constructor(private el: ElementRef) {
    
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.changeCss(this.colorCode ? this.colorCode : '#9898ff');
  }
  
  @HostListener('mouseleave') onMouseLeave() {
    this.changeCss(null);
  }

  private changeCss(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
    this.el.nativeElement.style.fontWeight = color? 'bold': 'normal';
  }
}

 

colorCode라는 값을 받로독 하였습니다.
test컴포넌트html파일에서 값을 넣어보도록 합니다.

* 대상 : test.component.html

<p>test works!</p>
<p appHelloworld [colorCode]='"yellow"'>얼럿 모듈이 들어왔습니까 : {{test_name}}</p>
<input type='button' value='테스트' (click) ='test()'/>
<app-alert [name] ='test_name' (sendToEvent)='getEvent($event)'></app-alert>

 

colorCode에 yellow라는 텍스트를 입력하였습니다.
예상한 바와같이 정상적으로 동작하는 것을 볼 수 있습니다.
이러한 디렉티브를 만드는 것에서 중요한 점은 Dom객체를 얼마나 이해하고 다루느냐가 중요합니다.

이번시간에는 디렉티브의 원리에 대해서 살펴 보았습니다.

 

fiveStudy.zip

0.02MB