▶[Angular Guide] 2. Architecture - (3) Template

▶[Angular Guide] 2. Architecture - (3) Template

---

우리는 template 를 활용하여  Component의 view를 정의할 수 있다. template 는 우리가 알고있는 HTML의 형태와 같고, Angular에게 어떻게 component를 렌더링할 지에 대해 알려주는 역할을 한다.

Template는 기본적으로 HTML 처럼 보인다. 물론 맞다. 그런데 몇가지 다른점이 있다. 다음 코드를 살펴보자.

 app/hero-list.component.html 

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

비록 이 template 가 전형적인 HTML 요소를 사용하고 있지만, (예를들어 <h2>나 <p>등) 이 외에 약간 다른부분을 어렵지 않게 찾을 수 있을 것이다.  *ngFor ,  {{hero.name}} ,  (click) ,  [hero] 등의 부분이 바로 전형적인 HTML과 다른 angular의 syntax이다. 

그리고 가장 하단에 보이는  <hero-detail> 부분은 Angular의 template syntax를 활용하여 작성된 것이다. 이  <hero-detail> 태그는 (예제에서) HeroDetailComponent라는 새로운 component를 표현하기위한 custom element이다. 

*template syntax에 대해서는 이후 작성될 글에서 다룰 것이다. 

(먼저 확인하고 싶다면 angular의 template syntax 부분을 보면 된다.)

HeroDetailComponent는 HeroListComponent와는 다른 Component이다.

HeroDetailComponent는 사용자가 HeroListComponent에의해 표현된 "영웅리스트"에서 선택한 Hero의 상세정보를 표현하는 Component이다. 

[이미지 출처 : angular.io/guide/arhitecture]

HeroDetailComponet는 HeroListComponent의 자식(child)이다.

위의 내용에서 <hero-detail>이라는 custom element가 native HTML element 사이에서 조화롭게 섞여있을 수 있음을 알 수 있었다. 따라서, 그리고 어떤 면에서는 덕분에, Custom component는 이 Custom Element를 HTML 코드와 동일한 레이아웃으로 섞어낼 수 있는 것이다.

이어 다음 글에서는 [Angualr Guide] 2. Architecture 의 세 번째 항목인 '(4) Metadata'에 대해서 정리해보려고 한다.

​