Angular (2) Tutorial - Component

위의 튜토리얼은 https://angular.io/tutorial 을 참고하였습니다.

1) heroes component

이제 타이틀밖에 남지 않은 빈 사이트인데,

여기서 히어로들의 정보를 넣어야합니다.

1-1. Create the heroes component

ng generate component heroes

이거 입력하면 heroes라는 컴포넌트를 생성한다고 함.

(컴포넌트란?

Component : fundamental building blocks of Angular applications

• display data on the screen
• listen for user input
• take action based on that user input )

이렇게 생성된 컴포넌트는 src/app/heroes/ 폴더에 있음

1. heroes.component.ts

   컴포넌트가 생성될 때 최초의 모습임

   import { Component, OnInit } from '@angular/core';
      
   @Component({
     selector: 'app-heroes',
     templateUrl: './heroes.component.html',
     styleUrls: ['./heroes.component.css']
   })
   export class HeroesComponent implements OnInit {
      
     constructor() { }
      
     ngOnInit() {
     }
      
   }
   

   • @component : 컴포넌트에 대한 Angular metadata들을 설명하는 데코레이터

     1. selector : CSS element selector
        • 부모 컴포넌트의 템플릿 내에서 이 자식 컴포넌트를 식별할 수 있는 식별자.
     2. templateUrl : component의 템플릿 파일이 있는 url
     3. styleUrls : component의 css style들이 있는 url

   • ngOnInit() : lifecycle hook

     뭔지는 모르겠는데 아무튼 컴포넌트를 만든 뒤에 시행하는 initialization logic 중에 하나라고 함.

   • export : 다른 곳에서 이 클래스를 임포트할 수 있도록 하는 원본 클래스를 만듬.

1-2. Add a hero property

// heroes.component.ts
export class HeroesComponent implements OnInit {
  hero = "Windstorm";
  constructor() { }

  ngOnInit() {
  }

}

근데 이 hero 선언을 ngOnInit 밑에 하면 안된답니다. 왜 안되는지는 모르겠다.

<!-- heroes.component.html -->

<p>{{hero}}</p>

1-3. Show the HeroesComponent view

이렇게 우리가 잘 만든 컴포넌트를 메인 view에서 보여주려면,

식별자 이름(‘app-heroes’)으로 html 태그를 지정해주면 됩니다.

<h1>{{ title }}</h1>
<app-heroes></app-heroes>

1-4. Create a Hero Class

단순한 변수 말고, 진짜로 여러 프로퍼티를 가진 Hero 객체 자체를 생성할 수는 없을까?

클래스 선언을 통해서 가능합니다.

// hero.ts
export class Hero {
  id: number;
  name: string;
}

타입스크립트 문법이 신기하네요.

// error!!
export class Hero {
  id : number;
  name : string;
}

뭔가 자바스크립트의 object를 생성하는 느낌인데 자바스크립트와는 달리 이런식으로 띄워서 쓰면 에러가 납니다.

아무튼 이렇게 Hero 클래스를 만들면 이걸 다른 폴더에서 임포트 할 수 있습니다.

// heroes/heroes.component.ts
import { Hero } from '../hero';

이렇게 임포트하면 Hero 클래스의 객체를 생성할 수 있습니다.

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  constructor() { }
  ngOnInit() {
  }
}

하지만, 이렇게 hero를 객체로 만들면 정보를 dot notation을 통해서 접근해야 하기 때문에 html파일을 바꿔줍시다.

<!-- heroes/heroes.component.html -->
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

1-5. Format with the UppercasePipe

<h2>{{hero.name | uppercase}} Details</h2>

이런식으로 pipe operator(|)를 통해서 필터를 거칠 수도 있습니다. vue.js의 필터함수와 매우 비슷하네요.

uppercase는 빌트인 파이프라서 그냥 쓸 수 있으며, 필터를 만들고 싶으면 따로 component를 생성하듯이 필터를 생성해야 한다고 하는데요,

그건 나중에 알아보도록 합시다.