🤔 디렉티브

동적인 앵귤러템플릿은 렌더링 할 때, 디렉티브가 제공한 로직에 따라 DOM을 변형시킴.
(디렉티브는 @Driective() 데코레이터가 있는 클래스를 의미함)

컴포넌트 또한 문법적으로 디렉티브임.
하지만 컴포넌트라는 디렉티브의는 앵귤러앱에서 개별적이고 매우 중요한 요소이기에 @Component()라는 데코레이터가 따로 있음.
@Component() 데코레이터는 @Driective()데코레이터에 템플릿 기능을 추가한 것이라고 볼 수 있음.

컴포넌트 외에 "구조적 디렉티브"와 "어트리뷰트 디렉티브" 두 가지 종류의 디렉티브가 존재함.
앵귤러는 두 종류에 속하는 다양한 디렉티브를 정의하고 있으며, 필요에 따라 @Directive()데코레이터를 사용해 직접 디렉티브를 정의할 수 있음.

컴포넌트처럼 디렉티브도 데코레이터로 수식되어지는 클래스에 메타데이터를 지정할 수 있고,
selector를 지정함으로써 HTML내부에 넣을 수 있음.
템플릿에서 디렉티브는 보통 엘리먼트 내부의 어트리뷰트로 표현되며, 이 어트리뷰트에 표현식을 연결하거나 데이터를 바인딩할 수 있음!

✨ 구조적 디렉티브(Structural Directives)

구조적 디렉티브는 DOM에 요소를 수정, 삭제, 추가함으로써 레이아웃이 변환됨.
아래의 예시코드를 보면, 뷰의 랜더링 방식을 표현하는 애플리케이션 로직을 추가하기 위해 두 내장(built-in) 구조적 디렉티브를 사용함.

//src/app/hero-list.component.html (structural)

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

• *ngFor: for문
• *ngIf: 조건식

자세한 정보는 "앵귤러 내장지시자"를 검색해보자!

✨ 어트리뷰트 디렉티브(Attribute Directives)

어트리뷰트 디렉티브는 이미 존재하는 엘리먼트의 모양이나 동작을 변형시킴.
이름에서 알 수 있다 싶이, 템플릿 내에서 어트리뷰트 디렉티브는 평범한 HTML어트리뷰트처럼 보임.

양방향 데이터 바인딩을 지원하는 ngModule디렉티브는 어트리뷰트 디렉티브의 한 종류임.
ngModule은 해당 엘리먼트의 표시값을 설정하고 변화하는 값에 반응함으로써 이미 존재하는 엘리먼트(보통 input)의 동작을 변형함!

//src/app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

<h3>My Budget: ₩{{budget}}</h3> 
<input type="text" [(ngModel)]="budget" >

// [(ngModel)]은 내부적으로 아래와 같이 동작합니다.
// [ngModel]="budget", (ngModelChange)="budget =$event"

ngModule의 양방향 바인딩을 통해 사용자의 인풋은 컴포넌트 내부의 buget값을 수정(from DOM, 이벤트 바인딩)하는 동시에 템플릿을 통해 표현되는 DOM의 엘리먼트 내부 budget을 수정함(to Dom, 프로퍼티 바인딩)

이 외에도 기본 디렉티브에는 조건에 따라 레이아웃을 선택해서 표시하는 ngSwitch,
DOM 엘리먼트와 컴포넌트에 스타일을 지정하여 수정하는 ngStyle,
클래스를 지정하는 ngClass등이 있다.

몇 개만 언급했지만 내장지시자는 꽤 여러개가 있어 찾아보는것이 좋을 듯 하다.

지시자에 대해서는 추후에 정리해도 글로 좋을 듯 하다:-)

Reference
http://angular.io/
https://jaeyoung-lee.tistory.com/4
앵귤러 마스터북