[Angular] 템플릿 문법 - Text interpolation

인터폴레이션으로 값을 표시하기

이중 중괄호로 감싼 표현 방법 {{ }}

// src/app/app.component.ts
currentCustomer = 'Maria';

<!-- src/app/app.component.html -->
<h3>Current customer: {{ currentCustomer }}</h3>

위의 경우에서 화면에 출력되는 값은 `Current customer: Maria`이다.

이미지의 속성 값으로 넣는 것도 가능하다.

// src.app/app.component.html
<div><img src="{{itemImageUrl}}"></div>

 

템플릿 표현

인터폴레이션 표현으로 해결하기

앵귤러는 {{ }} 안을 먼저 평가한 뒤에 결과물을 string 형태로 변경한다. 

<!-- src/app/app.component.html -->
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}.</p>

메서드를 호출하는 것도 가능하다.

<!-- src/app/app.component.html -->
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

 

인터폴레이션이 있는 경우, Angular가 수행하는 단계는 아래와 같다.

1. 모든 이중 중괄호 안의 표현식을 계산한다.

2. 식의 결과를 string형태로 변환한다.

3. 결과를 인접한 리터럴 스트링에 연결한다.

4. 요소나 디렉티브 프로퍼티에 할당한다.

 

 

문법

템플릿 표현식은 자바스크립트와 유사하다. 많은 자바스크립트 표현식은 일부 예외를 제외하고, 아래 표현식을 따른다.

- 할당 (= ,+=, -=, ...)

- new, typeof 나 instanceof와 같은 오퍼레이터

- `;`나 `,`와 같은 체이닝 표현식

- 증감 오퍼레이터 (++, --)

- ES2015+ 의 오퍼레이터

 

자바스크립트와의 차이점은 아래와 같다.

- `|`나 `&`와 같은 비트연산자에 대한 지원이 없음

- 새로운 템플릿 표현식 연산자 (`|`, `?.`, `!`)

 

 

표현식 컨텍스트

아래 코드에서 표현식 recommended 와 표현식 itemImageUrl2는 AppComponent 의 프로퍼티를 참조한다.

<!-- src/app/app.component.html -->
<h4>{{recommended}}</h4>
<img [src]="itemImageUrl2">

표현식은 템플릿 입력 변수 또는 템플릿 참조 변수와 같은 템플릿 컨텍스트의 특성을 나타낼 수도 있다.

<!-- src/app/app.component.html (템플릿 입력 변수) -->

<ul>
  <li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>

<!-- src/app/app.component.html (템플릿 참조 변수) -->

<label>Type something:
  <input #customerInput>{{customerInput.value}}
</label>

템플릿 표현식은 undefined를 제외하고는 어떠한 글로벌 네임스페이스도 참조할 수 없다. `window` 나 `document`를 참조할 수 없다. 게다가, `console.log()`나 `Match.max()`를 호출할 수 없고 표현식 컨텍스트를 참조하는 것으로 제한한다. 

 

이름 충돌 방지

만약 참조하는 이름이 두 개 이상의 네임스페이스에 포함되어 있다면, Angular는 아리 로직에 따라 컨텐스트를 결정한다.

1. 템플릿 변수 이름

2. 디렉티브의 컨텐스트 안에 있는 이름

3. 컴포넌트의 멤버 이름

 

다른 컨텍스트에서 변수가 쉐도잉되지 않도록 하려면, 변수명은 유일하게 유지해야 한다.

아래 예제에서, 첫번째 `customer`의 값은 'Padma'이지만, ngFor 안에서는 customers 안에 있는 요소들로 `customer`가 사용된다.

// src/app/app.component.ts

@Component({
  template: `
    <div>
      <!-- Hello, Padma -->
      <h1>Hello, {{customer}}</h1>
      <ul>
        <!-- Ebony and Chiho in a list-->
        <li *ngFor="let customer of customers">{{ customer.value }}</li>
      </ul>
    </div>
  `
})
class AppComponent {
  customers = [{value: 'Ebony'}, {value: 'Chiho'}];
  customer = 'Padma';
}

 

표현식 모범 사례

템플릿 표현식을 사용할때, 다음 모범 사례들을 사용하면 된다.

 

짧은 표현식 사용

가능할 때마다 속성 이름이나 메소드 호출에 사용한다. 개발과 테스트가 가능한 컴포넌트 내부의 애플리케이션이나 비즈니스 로직을 하기

 

빠른 실행

Angular는 모든 변화 감지 사이클 이후에 템플릿 표현식을 실행한다. promise resolutions, HTTP results, 타이머 이벤트, key presses 와 mouse 움직임 등과 같은 많은 비동기 활동들은 변경 탐지 싸이클을 일으킨다.

사용자 경험을 최대한 효율적으로 유지하려면, 특히 속도가 느린 장치에서는 표현식은 빠르게 끝내야 한다. 계산에 많은 리소스가 필요한 경우 캐싱하는 것을 고려해야 한다.

 

눈에 보이는 사이드 이펙트(부작용) 없음

Angular의 단방향 데이터 흐름 모델에 따르면, 템플릿 표현식은 타겟 프로퍼티 값 외에 다른 애플리케이션의 상태를 변경하지 않아야 한다. 컴포넌트 값을 읽어도 다른 표시된 값들은 변하면 안된다. 단일 렌더링 패스 동안 뷰가 안정적이어야 한다.

idempotent 표현식은 사이트 이펙트가 없으며, Angular의 변화 감지 성능을 향상시킨다. Angular 용어에서, idempotent 표현식은 종속값 중 하나가 변할 때까지 항상 정황히 동일한 값을 반환시킨다.

이벤트루프를 한번 돌리는 동안 종속 값은 변하지 않아야 한다. 만약 idempotent 표현식이 string이나 number를 반환한다고 하면, 두번 연속으로 호출하면 같은 string 이나 number를 반환할 것이다. 만약 표현식이 object 나 array를 포함한다면, 두번 연속으로 호출할 때 동일한 개체 참조가 반환된다.

이 동작에 `*ngFor`에 적용되는 한가지 예외는 있다. `*ngFor`는 객체에서 값이 변할 때 변하는 값을 처리할 수 있는 trackBy 기능을 가지고 있다.

 

 

참고사이트

https://angular.io/guide/interpolation

 

 

*오역이 있을 수 있습니다.