컴포넌트(Component)

컴포넌트는 Angular애플리케이션을 구성하는 기본 단위이며 아래 3가지로 구성된다.

1. TypeScript 클래스
2. HTML 템플릿
3. 스타일

---

TypeScript클래스 @Component데코레이터는 아래와 같은 역활을 한다.

• 템플릿에서 컴포넌트를 나타내는 CSS셀렉터를 지정한다.
• 컴포넌트의 뷰를 담당하는 HTML템플릿을 지정한다.
• 컴포넌트 뷰의 CSS스타일을 지정한다.

---

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // 여기에는 컴포넌트의 동작을 정의하는 코드가 들어간다.
}

selector:'hello-world'는 템플릿파일에서 해당 컴포넌트에 대응하는 사용자 요소노드를 지정한다.

<hello-world></hello-world>

index.html에 위 요소노드를 만들어놓고 컴포넌트 selector로 설정하는 것이다.

template은 selector 요소노드내에 삽입되는 HTML이다.

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

selector 요소노드내에 template 내용이 삽입되며 위와 같이 DOM을 구성한다.

클래스내에는 컴포넌트 요소노드를 제어하는 코드를 작성한다.