빌트인 드렉티브
빌트인 디렉티브(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에 추가한다.
- 참고
출처 : ourcstory.tistory.com/439?category=630698