템플릿

y0ung·2022년 4월 28일

angular view

ANGULAR

목록 보기

4/4

템플릿은 컴포넌트의 뷰를 구성하는 정보이다.

1 절차적 방식과 선언적 방식

절차적 방식

DOM에 직접 접근하여 데이터를 노출시키거나 뷰의 상태를 가져와 일련의 로직을 처리하는 등 일일이 수행하여햐야 하는 명령을 기술하는 방식 → 바닐라 js로 기술하는 방식이다.

let button = document.querySelector("#btn_start");
// ...

선언적 방식

컴포넌트와 뷰사이에 연결고리를 만드는 방식 즉, 템플릿안에 컴포넌트와 뷰의 관계를 선언한다.

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

@Component({
		selector: 'hello-angular',
		template:`
				<button id="btn_start" (click)="handleClick">start</button>
				<p ngIf="isStarted">보인다!</p>
		`
})
export calss HelloAngularComponent {
		isStarted: boolean = false;
		
		handleClick() {
				this.isStarted = true;
		}
}

2 데이터 바인딩

데이터 바인딩이란 선언적 방식으로 프로그래밍을 하기위한 구체적인 방법이다.

단방향 바인딩 : 삽입식 {{}}, 프로퍼티식[]

이벤트 바인딩: ()

양방향 바인딩: [()]

단방향 바인딩

삽입식

문자열로 변환될 수 있는 값

{{}}

<div>{{ contents }}</div>
<h1>{{ getLogo() }}</h1>
<a href="{{ someLink + 'lalala'}}"></a>
<p>1 + value = {{ 1 + value }}</p>

삽입식에 복잡한 연산 또는 값을 할당하는 표현식은 작성하면 안된다.
뷰에 바인딩된 결과가 화면에 반영되는 데 심각한 영향을 끼치지 때문이다.

프로퍼티 바인딩

컴포넌트에 DOM의 프로퍼티 값을 바인딩 한다.

[DOM 프로퍼티]="템플릿 표현식"
<p [textContent]="content"></p>
<img [src]="./test.img" [width]="10*20">
<img [src]="./test.img" width="128">

이벤트 바인딩

이벤트를 처리할 로직을 바인딩한다.
(이벤트 대상) = "템플릿 문장"

<button type="button" (click)="confirm()"></button>
<div (mousemove)="printPosition($event)"></div>
<input type="text" (keyup)="myStr = $event.target.value" />
<button type="button" (click)="clicekd = true; callEvent($event)"></button>

최소한의 로직을 제외하고는 로직은 컴포넌트에 기술하는 것이 좋다.

양방향 바인딩

뷰와 컴포넌트의 상태 변화를 서로 반영해 준다.

3 지시자

컴포넌트는 지시자를 상속받는 인터페이스 이다.
즉 컴포넌트도 지시자 이다.

구조지시자

DOM트리를 동적으로 조작하여 화면 구조를 변경할때 사용하는 지시자
NgIf : 조건에 따라 노출하거나 제거(DOM트리에서 제거된다)
```
<div *ngIf="boolean"></div>
```

NgFor: 배열 형태의 모델을 DOM 에 반복 표현할 때 사용

const animals = ['Dog', 'Cat', 'Deer'];

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

NgSwitch: DOM을 보여주거나 삭제

<span [ngSwitch]="animal">
		<span *ngSwitchCase='Dog'">멍멍</span>
		<span *ngSwitchCase='Cat'">야옹</span>
		<span *ngSwitchCase='Cock'">꼬끼오</span>
		<span *ngSwitchDefault>어험!</span>
</span>

불필요한 코드를 추가하지 않는 요소

ng-container

항상 view에 렌더링 된다.
오로지 지시자의 목적으로 생성된 태그에 사용된다.
HTML태그에 두개 이상의 구조 디렉티브(ngIf, ngFor)를 사용할수 없으나 ng-container에서는 사용할수 있다.

<ng-container *ngIf="boolean"></ng-container>

// 두개 이상의 구조 디렉티브 사용 예시
<ng-container *ngFor="let item of items">
   <div *ngIf="item.id">
      {{item.name}}
   </div>
</ng-container>

ng-template

view에 렌더링 되지 않는다.
DOM상에 존재 하지 않는다.
view가 렌더링 될수 있는 조건이 추가되면 주석 형태가 추가 된다.

<ng-template [ngIf]"boolean"></ng-template>

ngTemplateOutlet

ng-container에서 ngTemplateOutlet구조 디렉티브를 사용할수 있다.

<ng-container *ngTemplateOutlet="template"></ng-container> 
<ng-template #template> Hello!</ng-template>

동일한 템플릿을 사용할 경우 다음과 같이 사용할수 있다.

<div>
		HEADER
		<ng-container *ngTemplateOulet="logo"></ng-container>
</div>
<div>
		MAIN
		<ng-container *ngTemplateOulet="logo"></ng-container>
</div>
<div>
		FOOOTER
		<ng-container *ngTemplateOulet="logo"></ng-container>
</div>

<ng-template #logo>
		<img [src]="logoImage">
</ng-template>

참고: https://medium.com/sjk5766/ng-template과-ng-container-fb913ff1984d

속성 지시자

지시자가 선언된 DOM의 모습이나 동작을 조작하는 데 사용하는 지시자이다.
NgClass
NgStyle

4 파이프

뷰에 노출할 데이터를 간단하게 변환하거나 가공할 때 사용.
다음예시와 같이 데이터를 삽입식으로 노출시킬때 파이프(|)를 표시한후 앵귤러에서 기본적으로 제공하는 파이프 API나 커스텀 파이프를 나열해준다.
```
<p name="member-name">{{ myName | uppercase | honor }}</p>
```

커스텀 파이프

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'honor' })
export class HonorPipe implements PipeTransform {
		transform(value: string): string {
				return `${value} 님`
		}
}

transform(value: any, ...args: any[]): any

커스텀 파이프: 가변인자 args배열

파이프에서 추가로 인자를 받아 , 인자에 따라 변형 로직을 바꿀수 있다

<p name="member-name">{{ myName | uppercase | honor:'red' }}</p>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'honor' })
export class HonorPipe implements PipeTransform {
		transform(value: string, color: string): string {
				switch (color) {
						case: 'red':
								return `빨간색을 좋아하는 ${value}님`;
						case: 'blue':
								return `파란색을 좋아하는 ${value}님`;
				}
		}
}

위 포스팅은 앵귤러 첫걸음(조우진) 책의 내용을 학습 목적을 위해 요약 정리한 내용 입니다.

y0ung

어제보다는 오늘 더 나은

이전 포스트

템플릿