[Angular] 디렉티브 - Directive(지시/명령)

1. 정의

Directive는 DOM의 모양이나 동작을 지시하기 위한 명령이다. HTML Element형태로 사용되거나 Element의 attribute의 형태로 사용한다.

 

2. 디렉티브의 종류

① Component:  템플릿이 존재하는 디렉티브입니다. 일반적으로 알고 있는 컴포넌트이다.

② Attribute Directive: HTML Element의 attribute로 사용된다.

     - ngClass : CSS 클래스를 추가하거나 제거한다.

     - ngStyle : HTML 스타일을 추가하거나 제거한다.

     - ngModel : HTML 폼 element에 양방향 데이터 바인딩을 연결한다.

③ Structural Directive:  조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 디렉티브이다.

     - ngIf : 조건(true/false/value)에 따라 템플릿의 일부를 DOM 트리에 추가하거나 DOM 트리에서 제거합니다.

     - ngFor : 배열에 있는 항목마다 템플릿 일부를 반복합니다.

     - ngSwitch : 조건에 맞는 화면을 DOM 트리에 추가합니다.

④ Custom Directive - built-in 형태로 만들어진 directive가 아닌 직접 만들어서 사용하는 directive이다.

(공식문서), (ngClass, ngStyle 사용법)

 

3. 기본 구조(Structural Directive) 사용법/구문(syntax)

ng지시어 앞에 "*(아스테리스크)"을 붙이고, 태그 혹은 컴포넌트 엘리먼트안에 프로퍼티처럼 삽입한다.

 

3-1) *ngFor에서 index 활용하기

*ngFor로 반복되는 템플릿 안쪽에서는 index를 받아서 활용할 수도 있다.

 

<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>

 

3-2) *ngFor에서 조건이 참일 때만 엘리먼트 반복하기(구조 디렉티브 복수 사용 시)

조건이 참일 때만 HTML 영역을 반복하려면 *ngFor를 적용한 엘리먼트 안에 *ngIf 컨테이너 엘리먼트를 추가하면 된다. <ng-container>을 추가하고 이 엘리먼트 안에 상황에 맞게 ngFor 또는 ngIf를 사용하라는 말이다. 하나의 엘리먼트에 두개의 구조 디렉티브를 넣으면 에러가 발생한다. (공식문서)

 

3-3) *ngFor trackBy로 항목 추적하기 (React 에서 "key" 가 해주는 역할과 같음) (참고링크)

[1, 2, 3, 4, 5] 라는 배열이 있고, ngFor 가 각각의 요소를 HTML 태그로 그려준다고하자. 만약 배열의 인덱스 2 가 숫자 11로 바뀌면 Anuglar는 모든 요소를 다시 처음 부터 DOM 에 업데이트한다. trackBy 를 설정하면, 업데이트된 요소만 찾아 바꿔준다. 그렇기 때문에 DOM 을 처음 부터 다시 업데이트하지 않아 성능향상에 도움을 준다.

 

3-4) *ngSwitch 활용하기

일반적으로 자바스크립트에서 사용하는 switch문과 비슷하다. ngSwitch는 대괄호로 감싼 뒤 부모 엘리먼트에게 프로티 바인딩처럼 넣어준다. ngSwitchCase와 ngSwitchDefault는 *(아스테리스크)를 붙혀 자식 엘리먼트에 추가한다. (공식문서)

 

<div [ngSwitch]="currentItem.feature">
  <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
  <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
  <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
  <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
<!-- . . . -->
  <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item>
</div>