웹 앱 프레임워크 앵귤러(Angular) 컴포넌트 메타데이터

데코레이터 함수에 컴포넌트의 특성을 정의하는 메타데이터를 함께 전달

 

 

 

앵귤러(Angular) 컴포넌트는 컴포넌트 클래스에 @Component 데코레이터를 붙여 정의한다. 이때 데코레이터 함수에 컴포넌트의 특성을 정의하는 메타데이터를 함께 전달한다. 

 

아래 코드를 보면, HeroListComponenet는 단순한 클래스이다. 앵귤러(Angular)에만 사용하는 문법은 없는 것을 확인할 수 있다. @Component 데코레이터를 붙이기 전까지 이 클래스는 컴포넌트로 등록되지 않는다.

 

컴포넌트 메타데이터는 이 컴포넌트가 앵귤러(Angular)의 구성요소로써 어떻게 생성되고 어떤 뷰를 정의하고 동작할지 정의한다.

 

좀 더 자세하게 이야기하면, 뷰는 컴포넌트 메타데이터에서 지정하는 외부 템플릿 파일이나 인라인 템플릿이 컴포넌트 코드와 연결되면서 정의된다.

 

템플릿을 외부 파일에서 컴포넌트 안에 포함시킬지는 @Component 메타데이터 설정에 의해 결정된다. 그리고 의존성으로 주입을 받아야 하는 서비스가 있다면 이 내용도 메타데이터에 지정할 수 있다.

 

scr/app/hero-list.component.ts(메타데이터)

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
  /* . . . */
}

위 @Component 데코레이터의 메타데이터

 

selector : 컴포넌트 인스턴스가 DOM트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정합니다.

위 코드에서 HTML 문서의 <app-hero-list></app-hero-list>라고 작성한 위치에 HeroListComponent의 인스턴스가 생성되며, 이 엘리먼트가 HeroListComponent의 뷰로 대체된다.

 

templateUrl : 컴포넌트의 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정한다.

템플릿을 인라인으로 구성하려면 이 프로퍼티 대신 template 프로퍼티를 사용하면 된다. 템플릿은 컴포넌트의 호스트 뷰를 정의한다.

 

providers : 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정한다.

위 코드에서는 화면에 표시할 히어로의 목록을 가져오기 위해 생성자에서 HeroService를 의존성으로 주입받는데, HeroService의 인스턴스를 어떻게 받아올지 지정한다.