히어로들의 여행 : 1. 히어로 에디터

출처 : https://angular.kr/tutorial

컴포넌트 생성

ng generate components Heroes

기본 형태

// 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 {
  hero = 'Windstorm';

  constructor() {}

  ngOnInit(): void {}
}

• selector: 'app-heroes'
  CSS 엘리먼트 셀렉터
  DOM트리(HTML)에서 해당 컴포넌트를 표현하는 이름이며, 부모 컴포넌트의 템플릿에 사용합니다.

• ngOnInit(): void {}
  라이프싸이클 후킹 함수 입니다. 컴포넌트를 생성한 직후에 ngOnInit를 호출합니다. 그래서 컴포넌트를 초기화하는 로직은 이 메소드에 작성하는 것이 좋습니다.

HTML에 데이터 바인딩

• {{변수명}} 으로 데이터를 바인딩한다.

// heroes.component.html
<h2>{{hero}}</h2>

컴포넌트 추가하기

// src/app/app.component.html

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

UppercasePipe로 표시형식 지정하기

// src/app/heroes/heroes.component.html

<h2>{{ hero.name }} Details</h2>
<div><span>id : </span>{{ hero.id }}</div>
<div><span>name : </span>{{ hero.name | uppercase }}</div>

• 파이즈 연산자(|) 바로 뒤에 있는 uppercase 는 Angular의 기본 파이프인 UppercasePipe를 가리킵니다.
  파이프는 문자열의 형식을 지정하거나, 통화 단위를 변경하고, 날짜나 데이터가 표시되는 형식을 변경할 때 사용합니다.

FormsModule 로드하기

• ngModel 과 같은 디렉티브를 사용하기 위해서는 사용하고자 하는 디렉티브가 포함된 모듈을 불러와야 한다.

• FormsModule 를 import 해주고 @ngModule 메타데이터의 imports 배열에 추가합니다. 이 배열에는 애플리케이션이 동작할 때 필요한 외부 모듈을 등록합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  ⭐️⭐️⭐️⭐️

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [AppComponent, HeroesComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule], ⭐️⭐️⭐️⭐️
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

양방향 바인딩 : 히어로 정보 입력하기

• 컴포넌트(클래스)와 화면(HTML) 간에 데이터 공유

• [(ngModel)] 은 Angulardml 양방향 바인딩 문법

...
<div>
  <label for="name">Hero name : </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

• [(ngModel)] 로 인해 input 태그에 입력값이 자동으로 hero.name에 업데이트 되고 변경된 내용으로 재랜더링된다.

데코레이터

• 개발자가 만든 Angular 구성요소나 서드파티 파일, 라이브러리를 angular가 조합할 때는 이 구성요소들에 대한 정보가 필요합니다. 이런 정보를 메타데이터(metadata)라고 합니다.

• 컴포넌트 클래스에 지정해야 하는 메타데이터는 @Component 데코레이터에 지정합니다. 그리고 애플리케이션 동작에 필요한 메타데이터는 보통 @ngModel 데코레이터에 지정합니다.

• 이 중에서 가장 중요한 데코레이터는 애플리케이션 최상위 모듈인 src/app/app.module.ts 파일에 @NgModule 데코레이터 입니다.