[Angular] Built-in Directive (빌트인 디렉티브)

빌트인 드렉티브

빌트인 디렉티브(Built-in directive)란?

• DOM의 모든것을 관리하기 위한 지
• HTML요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시를 전달

• 컴포넌트의 복잡도를 낮추고 가독성을 향상

• 디렉티브 3가지 유형

  • 컴포넌트 디렉티브 (Component Directives)
  • 컴포넌트의 템플리 표시하기 위한 디렉티브 @Component 데코레이터의 메타데이터 객체의 selector 프로퍼티
  • 어트리뷰터 디렉티브 (Attribute Directives)
  • HTML 요소의 어트리뷰트와 같이 사용하여 해당 요소의 모양이나 동작을 제어, ngClass, ngSylte
  • 구조 디렉티브 (Structual Directives)
  • DOM 요소를 반복 생성(ngFor), 조건에 의한 추가 또는 제거(ngIf, ngSwitch)를 통해 DOM 레이아웃 변경

빌트인 어트리뷰트 디렉티브(Built-in attribute directive)

• HTML요소의 어트리뷰트와 같이 사용하여 해당 요소의 모양이나 동작을 제어
• ngClass
  • CSS 클래스를 추가 또는 제거
  • 한개의 클래스를 추가 또는 제거할 때는 클래스 바인딩을 사용하는 것이 좋다.
• ngStyle
  • HTML 인라인 스타일을 추가 또는 제거
  • 한개의 인라인 스타일을 추가 또는 제거할 때는 스타일 바인딩을 사용하는 것이 좋다

빌트인 구조 디렉티브 (Built-in structural directivec)

• 구조 디렉티브
  • 구조 디렉티브는 DOM요소를 반복 생성(ngFor), 조건에 의한 추가 또는 제거를 수행 (ngIf, ngSwitch)을 통해 뷰의 구조를 변경한다.
  • 구조 디렉티브에는 *접두사를 추가하여 []을 사용하지 않는다.
  • 하나의 호스트 요소(디렉티브가 선언된 요소)에는 하나의 구조 디렉티브만을 사용
• ngIf
  • *ngIf="expression"
  • ngIf디렉티브를 사용하지 않고, 스타일 바인딩 또는 클래스 바인딩을 사용하여 요소를 표시/비표시 구현 가능
  • 위 방법은 브라우저에 의해 렌더링 되지 않지만 DOM에 남아있다. ngIf 디렉티브에 의해 제거된 요소는 DOM에 남아있지 않고, 완전히 제거되어 불필요한 자원 낭비를 방지
  • else, then을 사용 가능
• ngFor
  • 컴포넌트 클래스의 컬렉션을 반복하여 호스트 요소 (ngFor 디렉티브가 선언된 요소) 및 하위 요소를 DOM에 추가
  • *ngFor="let item of items; let i=index; let odd=odd; trackBy: trackById"
  • for of에서 사용할 수 있는 iterable 이라면 사용 가능, 문자열 MAP, 배열이 아닌 일반 객체는 사용할 수 없다.
  • 인덱스를 취득할 필요가 있는 경우, index를 사용하여 변수에 인덱스 할당 가능, first, last, even, odd와 같은 로컬 변수가 제공
  • ngFor 디렉티브는 컬렉션 데이터가 변경되면 컬렉 과 연결된 모든 DOM요소를 제거하고 다시 생성한다.
  • 컬렉션의 변경 사항을 추적할 수 없기 때문에,크기가 매우 큰 컬렉션을 다루는 경우 퍼포먼스 상의 문제를 발생시킬 수 있다.
  • ngFor 디렉티브는 퍼포먼스 향상시키기 위한 기능으로 trackBy를 제공한다.
  • trackBy에서 트랙킹 할 수 있는 프로퍼티는 유니크하여야 한다.
  • 일반적인 경우 ngFor는 충분히 빠르기 때문에 trackBy에 의한 퍼포먼스 최적화는 기본적으로 필요하지 않다.

• ngSwitch

  • switch 조건에 따라 여러 요소 중에 하나의 요소를 선택하여 DOM에 추가한다.

• 참고

  • http://poiemaweb.com/angular-component-built-in-directive