앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)

앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)

---

이번 시간에는 세부 구성 요소를 꾸며보려고 한다.

HeroDetailCompnent를 만들어보도록 하자

ng generate component hero-detail

app.module을 확인하면, 자동적으로 선언된 hero-detail 컴포넌트를 확인할 수 있다. (지난시간에 배운 부분)

이제 hero-detail 컴포넌트에 세부사항을 옮길 것이다.

기존의 heroes.component.html에서 세부사항에 해당했던 코드를 잘라내어 hero-detail.component.html으로 옮기자.

이제 참조하는 형식이 변경되었기 때문에, 기존 코드의 selectedHero를 hero로 다시 모두 변경해주어야 한다. 따라서 html 템플릿 코드는 다음과 같다.

<div *ngIf="hero">

  <h2> Details</h2>
  <div><span>id: </span></div>
  <div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

</div>

selectedHero가 hero로 변경된 모습이다.

---

영웅 속성을 추가시켜주어야 한다. hero-detail.component.ts에 hero.ts에 있는 Hero를 import해주자.

import { Hero } from '../hero';

이 때, hero 속성은 외부 HeroesComponent에서 바인딩이 되기 때문에, @Input() 데코레이터를 사용해서 가져와야 한다.

따라서 heroes.component.html에는 다음과 같이 세부사항을 불러올 수 있다.

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

이는 Input 속성을 활용한 것인데, hero가 selectedHero일 때 적용된다는 뜻이다. 이와 같은 것을 앵귤러의 ‘속성 바인딩’이라고 한다.

이제 hero-detail.component.ts의 @angular/core에서 Input을 포함시켜보자

import { Component, OnInit, Input } from '@angular/core';

이어서 클래스 함수 내에 hero속성인 @Input() decorator를 추가시킨다.

@Input() hero: Hero;

이렇게만 해주면, hero-detail에 필요한 속성 추가가 모두 끝났다.

단순히 기존의 heroes 컴포넌트에 존재하는 세부사항을 따로 떼서 컴포넌트로 만들어주기 위한 수업이었다.

이렇게 컴포넌트로 세분화시키는 것이 아주 좋은 습관이다. 왜냐하면 추후에 수정이 필요할 때, 컴포넌트로 주요 기능들을 나누어놓으면 찾기 쉽고 유지보수에도 좋은 장점을 가져다주기 때문이다. 이 튜토리얼에서도 heroes의 html에서 세부사항에 대한 코드를 <app-hero-detail [hero]=”selectedHero”></app-hero-detail> 이 한줄로 간추릴 수 있었다.

따라서 프로젝트가 커지면 커질수록 기능을 컴포넌트로 분류시켜 정리하는 습관을 들이는 것이 중요하다.

Heroes와 HeroDetail로 나누었을 때 이점

• Heroes 컴포넌트를 단순화 시켰다.
• Heroes 컴포넌트를 건들지 않고도 HeroDetail 컴포넌트를 통해 편집이 가능해졌다.
• Heroes 컴포넌트의 영웅 상세보기를 건드리지 않고도 변화를 만들어낼 수 있다.
• HeroDetail 컴포넌트를 나중에 템플릿으로 재사용이 가능하다.

---

요약

• HeroDetail 컴포넌트처럼, 재사용할 수 있는 컴포넌트를 만들 수 있다.
• 부모 컴포넌트에서 자식 컴포넌트를 사용하기 위해 ‘속성 바인딩’을 사용할 수 있다. (부모 : HeroesComponent, 자식 : HeroDetailComponent)
• @Input 데코레이터를 사용해서, hero를 외부에서 바인딩하도록 속성을 만들 수 있다.