지시자 (Directive)

Angular2 스터디 발표 자료
지시자는 템플릿내에서 사용되는 구성요소의 모양이나 구조를 결정, 컴포넌트 지시자, 구조 지시자, 속성 지시자, 커스텀 지시자가 있음.
- 선언형 프로그래밍과 지시자
- 커스텀 지시자

1. 선언형 프로그래밍과 지시자

• 선언형 프로그래밍은 순서나 문제해결 과정을 다루기보다, 무엇을 나타내야 할지에 관심.
• 선언형 프로그래밍의 예로 HTML이 있음
• HTML에서 중요한 것은 애플리케이션이 추구하는 목적에 부합하도록 엘리먼트를 배치했느냐
• angular도 선언형 프로그래밍 방식으로 개발

1-1. 지시자의 장점

• 템플릿에 가독성을 부여 : 지시자에 의미있는 이름을 부여하여 컴포넌트가 어떻게 동작할지를 예측가능.
• 코드 복잡도를 낮춤 : P.280 참조

1-2. 지시자(Directives)의 종류

• 컴포넌트 지시자 : 컴포넌트 템플릿을 표시하기 위한 지시자.

@Component({
  selector : 'component-name'
})
export class ComponentClass{

}

• 구조 지시자 : Angular2에서 제공하는 내장 지시자이며 ng접두어가 붙어있음. 공식 사이트 참조

<span [ngSwitch]="조건"> <template [ngSwitchCase]="값"></template </span>

<ul *ngIf="show">

<li *ngFor="let i of list">

• 속성 지시자 : 네이티브 엘리먼트의 class, style 속성과 구분하기 위한 접두어로 ngClass, ngStyle 사용

<ul [ngClass]="className">

<li [ngStyle]="{'font-style':bold;}">

• 커스텀 지시자 : 사용자가 새롭게 추가할 수 있는 지시자.

2. 커스텀 지시자

• 컴포넌트와 별개의 파일에 정의.
• 네이밍 규칙은 파일명.directive.ts

2-1. 커스텀 지시자 샘플

//1. 커스텀 지시자 생성
import { Directive } from '@angular/core';

@Directive({
  selector : '[my-click]',
  host : { '(click)' : 'onClick()'}
})
export class MyClickDirective{
  onClick(){
    alert('Hello');
  }
}

//2. 커스텀 지시자 사용 컴포넌트 생성
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-directive',
  template: '<button my-click> onClick() </button>'
})
export class CustomDirectiveCmp {
  constructor() { }
}

//3. 모듈에 등록
import { CustomDirectiveCmp } from './custom-directive/custom-directive.component';
import { MyClickDirective } from './custom-directive/my-click.directive';

declarations: [
    CustomDirectiveCmp, MyClickDirective,
  ]

2-2. selector와 @Input, @Attribute 장식자

• selector사용시 대괄호를 이용하면, 속성 바인딩을 이용한다.
• 대괄호를 이용하여 속성 바인딩이 적용되어 있으면 @Input 장식자로 값을 받아 들일수 있다. P.287참조
• 대괄호가 없는 일반 속성값을 받기위해선 @Attribute 장식자를 사용한다. P.288참조

2-3. 커스텀 지시자에 이벤트 추가

• 이벤트 추가는 host속성과 @HostListener 장식자를 이용한다.

//1. host속성
@Directive({
  host : {
    '(click)':'clickEvent()',
    '(mousemove)':'mousemoveEvent()'
  }
})

//2. @HostListener
import { HostListener } from '@angular/core'

@HostListener('click') clickEvent(){}
@HostListener('mousemove') mousemoveEvent(){}

2-4. ElementRef와 Renderer

• Angular는 DOM에 바로 접근하는 것을 허용하지 않는다.
• 만약 DOM을 직접 제어하고 싶다면 ElementRef 모듈을 이용한다.
• 엘리먼트의 모양을 결정해야 하는것 같은 작업을 목적으로 한다면 Renderer를 이용한다.

예제소스