Metadata
앞의 Component에서 설명한 HeroListComponent에서 우리는 그것이 단지 클래스일뿐이라는 것을 알 수 있습니다. 그 안에는 프레임워크의 증거는 찾아볼 수 없고, 또한 그안에는 Angular처럼 보이는 어떤 것도 없습니다.
사실 HeroListComponent는 단지 클래스입니다. 우리가 Angular에게 알려주기 전까지는 컴포넌트가 아닙니다.
우리는 Angular에게 HeroListComponent가 컴포넌트라는 것을 알려주기 위해서는 클래스에 Metadata를 붙여 주어야 합니다.
Typescript에서는 Metadata를 decorator를 사용하여 붙여줄 수 있습니다. 아래 예제에서는 HeroListComponent에 대한 Metadata를 정의합니다.
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
여기의 @Component decorator는 바로 아래에 선언된 클래스가 컴포넌트로 식별할 수 있게 해줍니다.
또한 @Component decorator는 Angular가 컴포넌트와 View를 표현하는데 필요로 하는 정보를 가진 구성 객체를 정의합니다.
아래에 몇가지 @Component 설정 옵션이 있습니다.
- moduleId : templateUrl과 같은 모듈 상대적(module-relative)인 URL에 대한 기본 주소(module.id)의 소스를 지정합니다.
※ from StackOverflow : module.id는 CommonJS 사용시 작동하므로, 일반적으로 신경쓰지 않아도 되는 부분이며, 단순히 module.id로 정의합니다. 만약, webpack을 사용하여 번들링 하는 경우 Webpack Plugin이 자동으로 moduleId를 핸들링 하기 때문에 module.id는 필요 없습니다.
- selector: angular에게 컴포넌트의 인스턴스를 생성하고 삽입하기 위한 CSS 선택자입니다. 이는 부모 HTML안의 와 같은 태그를 정보를 의미합니다.
- templateURL: 컴포넌트의 HTML template의 모듈 상대 경로입니다.
- providers: 컴포넌트가 필요로 하는 서비스에 대한 의존성 주입 공급자들의 배열로, 컴포넌트의 생성자가 필요로 하는 서비스에 대해 설정하는 하나의 방법입니다.(위 예제에서 생성자에 HeroService를 지정함으로써 영웅들의 목록을 조회할 수 있다.)
@Component 안의 Metadata는 Angular에게 정의한 컴포넌트에 대한 주요 building block을 어떻게 가져올 수 있는지 알려줍니다.
결국 Template과 Metadata, Component가 모여서 하나의 View를 구성합니다.
Angular의 행동을 가이드하는 유사한 형태의 decorator들은 @Injectable, @Input, @Output 등이 있습니다. 아키텍쳐적으로 중요한 요소는 Angular가 뭘 하는지 알기 위해서는 코드에 반드시 metadata를 추가하여야 한다는 점입니다.