Programming/Web

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

쌍쌍바나나 2018. 1. 22. 22:52
반응형

빌트인 드렉티브

빌트인 디렉티브(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
반응형
1 2 3 4 5 6 7 8 9 10 ··· 24