08 구조 디렉티브(Structural Directive) 01

구조 디렉티브

이 가이드는 Angular가 구조적 디렉티브로 DOM을 조작하는 방법과 동일한 작업을 수행 할 구조적 디렉티브를 작성하는 방법을 살펴 봅니다.

라이브 예제 / 예제 다운로드를 사용해보십시오.

 

구조 디렉티브란?

구조 디렉티브는 HTML 레이아웃을 담당합니다. 일반적으로 엘리먼트를 추가, 제거 또는 조작하여 DOM 구조를 모양 짓거나 변형합니다.

다른 디렉티브와 마찬가지로 구조 디렉티브를 호스트 엘리먼트에 적용합니다. 디렉티브는 그 호스트 엘리먼트와 그 자손과 관련이있는 모든 것을 수행합니다.

구조 디렉티브는 쉽게 인식 할 수 있습니다. 이 예제에서와 같이 별표 (*)가 디렉티브 어트리뷰트 이름 앞에 옵니다.

 

src/app/app.component.html (ngif)

<div *ngIf="hero" >{{hero.name}}</div>

대괄호 없음. 괄호가 없습니다. 그냥 *ng 문자열로 설정하십시오.

이 가이드에서 별표 (*)는 편리하게 사용하기 위한 표기법이며 문자열은 일반적인 템플릿 표현이 아닌 마이크로 신텍스(microsyntax)임을 알 수 있습니다. Angular는 호스트 엘리먼트와 그 자손을 둘러싼 마크 업된 <ng-template>에 이 표기법을 적용하지 않습니다. 각 구조 디렉티브는 해당 템플릿과 다른 것을 수행합니다.

NgIf, NgFor 및 NgSwitch와 같은 일반적인 내장 구조 디렉티브중 세 가지가 Template Syntax 가이드에 설명되어 있으며 Angular 문서의 샘플에서 볼 수 있습니다. 다음은 템플릿에 있는 예제입니다.

src/app/app.component.html (built-in)

<div *ngIf="hero" >{{hero.name}}</div>   <ul>   <li *ngFor="let hero of heroes">{{hero.name}}</li> </ul>   <div [ngSwitch]="hero?.emotion">   <happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></happy-hero>   <sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></sad-hero>   <confused-hero *ngSwitchCase="'confused'" [hero]="hero"></confused-hero>   <unknown-hero  *ngSwitchDefault           [hero]="hero"></unknown-hero> </div>

이 가이드는 사용 방법을 반복하지 않습니다. 그러나 이것들이 어떻게 작동하고 나만의 구조 디렉티브를 작성하는 방법을 설명합니다.

디렉티브 철자

이 가이드 전체에서 UpperCamelCase와 lowerCamelCase의 철자가 함께 표시됩니다. 이미 NgIf와 ngIf를 보았습니다. 이유가 있습니다. NgIf는 디렉티브 클래스를 참조합니다. ngIf는 디렉티브의 어트리뷰트 이름을 나타냅니다. 디렉티브 클래스는 UpperCamelCase (NgIf)로 표기됩니다. 지시어의 어트리뷰트 이름은 lowerCamelCase (ngIf)로 표기됩니다. 이 안내서는 어트리뷰트에 대해 이야기 할 때 디렉티브 클래스를 참조하고 디렉티브가 수행하는 작업에 대해 설명합니다. 이 안내서는 HTML 템플리트의 엘리먼트에 디렉티브를 적용하는 방법을 설명 할 때 어트리뷰트 이름을 참조합니다.

 

두 종류의 Angular 디렉티브가 있습니다. (1)컴포넌트 및 (2) 어트리뷰트 디렉티브입니다. 컴포넌트는 네이티브 HTML 엘리먼트의 방식으로 HTML 영역을 관리합니다. 기술적으로 템플릿과 관련된 디렉티브입니다. 어트리뷰트 디렉티브는 엘리먼트, 컴포넌트 또는 다른 디렉티브의 모양이나 동작을 변경합니다. 예를 들어 기본 제공 NgStyle 디렉티브는 동시에 여러 엘리먼트 스타일을 변경합니다. 하나의 호스트 엘리먼트에 많은 어트리뷰트 디렉티브를 적용 할 수 있습니다. 호스트 엘리먼트는 하나의 구조 디렉티브만 적용 할 수 있습니다.