Angular Component를 좀 더 들여다보자

Anuglar의 가장 중요한 요소라고 말씀드렸던 Component에 대해 더 자세히 보겠습니다.

Angular Web Application의 핵심 부품인 Component는 3개의 파일로 구성됩니다.

타입스크립트 파일인 ts 파일과 템플릿 html 파일, 스타일 css 파일 입니다.

이미 만들어져있는 app.component.{ts,html,css} 파일들을 보겠습니다.

(app.component에는 spec.ts파일이 하나 더 있는데 테스트를 위한 파일 입니다.)

먼저 app.component.ts 파일은 아래와 같이 생겼습니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent { }

import는 이미 만들어진 Module에 대한 의존성이라고 보시면 됩니다.

오늘 살펴볼 부분은 @Component라고 쓰여진 Metadata 입니다.

AppComponent는 타입스크립트 Class입니다.

@Component는 Angular가 Compile될 때, 이 Class가 Component임을 표시해줍니다.

그리고 또 Component로서 어느 곳에 무엇을 어떻게 표시할지 속성을 가지고 있죠.

속성이 3가지 있습니다.

1. 어느 곳에(Selector)

2. 무엇을(TemplateUrl)

3. 어떤 스타일로(StyleUrls)

Selector는 Component가 들어갈 html tag라고 보시면 됩니다.

index.html의 <app-root></app-root>태그 기억하시나요?

TemplatUrl은 Component에 들어가는 html 문서의 골격입니다.

첫 화면에 보여지는 Welcome화면의 태그들이 다 app.component.html에 있죠.

StyleUrls는 html의 스타일을 지정해주는 css파일들입니다.

JavaScript Array 형태로 여러 파일이 선택될 수 있습니다.

물론 다른 속성들도 있습니다만, 그건 하나하나 해보면서 익혀가겠습니다.

다음에는 새로운 Component를 직접 추가해보도록 하겠습니다.