05. Angular로 개발하기 - 3 - 구조 지시자

Angular로 개발하기 - 5

데코레이터 ( 이건 이전에 것 보충 )

export class simpleComponent { }

컴포넌트는 하나의 클래스다 위 처럼 simpleComponent라는 클래스가 있다고 가정해보자.

이 클래스는 아직까지는 순수한 타입스크립트 클래스이다. 여기서 순수하다라는 표현은 아직까지는 컴포넌트가 아니라는 뜻이다.

즉 컴포넌트로 사용하기 위해서는 앵귤러에게 컴포넌트임을 알려주어야한다.

여기서 사용하는 것이 Component 데코레이터이다. 데코레이터가 대상을 장식한다는 의미를 가진 것처럼 컴포넌트데코레이터는 앵귤러가 평범한 타입스크립트 클래스를 컴포넌트로 인지할 수 있도록 하는 역할을 한다.

import { Component } from '@angular/core'

먼저 @angular/core라는 패키지를 임포트해야한다. 왜냐하면 컴포넌트 데코레이터는 위 패키지에서 제공하고 있기 때문이다.

import { Component } from '@angular/core'

@Component({
    selector: 'af-simple',
    template: `<h1>Angular is not simple</h1>`
})

export class SimpleComponent { }

---

구조지시자

구조 지시자는 DOM요소를 추가하거나 삭제하는 등 DOM 트리를 동적으로 조작하여 화면의 구조를 변경할 때 사용하는 지시자이다. 앵귤러에서는 기본적으로 NgIf, NgFor, NgSwitch를 제공한다.

NgIf

<div>
    <button type="button" (click)="isShow  = !isShow">전환</button>
    <label *ngIf="isShow; else hiding">true</label>
    <ng-template #hiding>
    <label>false</label>
    </ng-template>
</div>

ngIf는 말그대로 if문인 것 같다. isShow라는 변수가 클릭당할때마다 불리언값이 바뀌는데 그 값이 참일 경우에는 label 요소가 뷰에 활성화되고 거짓일 경우에는 해당 label 요소가 dom트리에서 제거되고 else 뒤에 hiding이 가리키는 템플릿 참조 변수의 요소가 DOM으로 삽입된다.

---

NgFor

app.component.html

<ul>
    <li *ngFor="let animal of animals; let idx = index">{{ idx + 1 }} {{animal}}
    </li>
</ul>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'app';
    idx = 1;
    animals = ['lion','tiger','eagle','dog'];
}

ngFor도 우리가 흔히쓰는 for문과 같은 기능을 한다. 쓰는 방식이 거의 파이썬 문법과 흡사한 것 같다. *ngFor="let animal of animals; let idx = index".ts파일에 있는 변수들을 .html파일의 태그안에서 for문으로 사용한다.

---

NgSwitch

<span [ngSwitch]="animal">
<span *ngSwichCase="'Dog'">멍멍</span>
<span *ngSwichCase="'lion'">어흥</span>
<span *ngSwichCase="'tiger'">쿠앙</span>
<span *ngSwichCase="'eagle'">난다</span>
<span *ngSwichDefault>none</span>
</span>

NgSwitch는 첫번째 줄과 같이 먼저 [ngSwitch]에 바인딩할 속성을 선언한다 그리고 해당하는 자식요소의 속성에는 ngSwichCase에 각 케이스별 값을 바인딩을하고 아무런 값에도 매칭되지 않을 경우에는 ngSwitchDefault 속성을 사용한다.