Directive 는 Angular에서 상당히 중요한 부분으로, 단어 그 의미에서 뜻을 알 수 있듯이(방향을 가리키다는 뜻인 direct 와 그것의 형용사 접미사인 -ive가 붙었음), 어플리케이션을 구성하고 있는 요소들에게 무언가를 하라고 지침을 내려주는 것이다.

이 Directive (이하 지시자 로 칭하겠음)에 대해 공식 문서에서는 종류를 세 가지로 분류하는데, 다음과 같다;

1. 컴포넌트 (Component)
2. 구조적 지시자 (Structural Directive)
3. 속성 지시자 (Attribute Directive)

컴포넌트는 Angular 2 어플리케이션의 거의 모든 것이라고 봐도 무방할 정도로 중요한 건물의 벽돌과도 같은 존재이기 때문에 다른 글에서 제대로 다루기로 하고, 이 글에서는 2번과 3번, 구조적 지시자와 속성 지시자에 대해 알아보자.

구조적 지시자 ¶

구조적 지시자는 HTML 문서 내의 DOM 의 형태를 제어할 수 있는 지시자 이며, 예시로는 ngFor, ngIf 등이 있다.

@Component({
  selector: 'test',
  template: `
    <ul>
      <li *ngFor='let data of testData1'>{{data}}</li>
    </ul>

    <h3 *ngIf='testData2'>I will be hidden!</h3>
  `
})
export class testComponent {
  testData1:string[] = [
    "Value 1",
    "Value 2",
    "Value 3"
  ];

  testData2:boolean = false;
}

속성 지시자 ¶

속성 지시자는 어떤 DOM 요소를 제어하는 지시자 이다. 대개 속성 지시자를 사용하는 경우, 꼭 HTML 의 속성으로 줄 필요는 없지만, 그렇게 하지 않는 경우는 정말 특별한 경우_{일부로 다음에 코드를 읽을 사람에게 큰 엿을 선사하고 싶은 경우라던지…}이므로 거의 모든 경우에 HTML의 속성으로 사용한다.

속성 지시자는 Directive Decorator 로 생성되며, 이후에 사용 시에 모듈 레벨(예제 수준의 경우 루트 모듈인 AppModule)에서 declarations 에 추가를 해 주면, 동일 모듈 내에서 자유롭게 사용 가능하다.

다음은 Angular 2 공식 홈페이지에서 소개하고 있는 예제이다.

import { Directive, ElementRef, Input, Renderer } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer) {
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

이후에 HTML의 마크업 내에 myHighlight 속성을 지닌 요소가 있다면, 해당 요소의 배경색은 yellow 가 될 것이다.

여기서 selector가 [myHighlight] 인 것에 주의하자. CSS 의 선택자에서 [이것] 은 <p 이것> 같은 녀석을 포착한다. (문서 참조)