Angular2 | 컴포넌트 기본 코드 | app.component.ts

Tags:

• Angular2
• WEB

앞에서 Angular 기본적인 파일 구성에 대해 설명했었다. 그것으로 src 폴더에 있는 app 폴더 안에 컨포넌트 파일이 준비되어 샘플에서는 app.component 라는 컴포넌트 파일이 포함되어 있다는 것을 알 수 있었다.

이 app.component의 내용이 어떻게 되어 있는지 알게 되면, 컴포넌트가 어떻게 만들어지고 있는지 알 수 있다. 그럼 app.component.ts에서 대해서 보도록 하자.

app.component.ts는 TypeScript 스크립트 파일이다. 아래에 디폴트 그대로 작성되어 있는 내용은 아래와 같다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

이것이 Angular 컴포넌트의 소스 코드이다. 이것을 좀 더 정리보면 다음과 같다.

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

@Component(……설정 정보……)
export class 컴포넌트명 {
    ……필요한 정보……
}

처음에 import는 모듈을 로드하기 위한 것이다. Angular에서는 다양한 기능이 준비되어 있는데, 모두 모듈화되어 있다. 모듈은 이 import라는 것을 사용하여 로드한다. 이것은 아래와 같은 식으로 작성한다.

import 로드하는 객체 from 모듈 지정;

로드하는 객체는 {} 안에 콤마(,)로 구분하여 여러 개를 작성할 수 있다.

여기서는 @angula /core라는 모듈에 있는 Component라는 것을 로드한다. 이는 다음에 있는 @Component라는 어노테이션 객체이다.

어노테이션라는 것은 코드에 다양한 정보를 추가하기 위한 것이다. 이 @Component는 아래에 정의된 클래스에 콤포넌트로 사용하기 위한 여러 기능을 포함되이 있는 것이다. 쉽게 말하면, 클래스 정의 앞에 @Component 어노테이션을 지정하면, 그 클래스는 컨포넌트로 인식되게 된다는 것이다.

@Component 설정 및 export되는 클래스

그럼, @Component 어노테이션을 살펴 보도록 하자. 이 어노테이션 다음 ()에는 인수로 객체가 지정되어 있다. 이 객체에 컴포넌트에 전달되는 각종 설정 정보가 포함된다. 여기에서 지정되어 있는 것은 다음과 같은 항목이다.

• moduled : 모듈 이름을 지정한다. 여기에서는 module.id 값이 지정되어 있다. 모듈의 ID를 그대로 moduleId로 설정하는 것이다.

• selector : 이것은 컨포넌트를 식별하기 위한 이름이다. 여기에서는 app-root로 지정되어 있어서, 이 컴포넌트는 app-root라는 이름으로 식별된다. 이는 <app-root>라는 태그에 이 컴포넌트를 사용할 수 있게 된다.

• templateUrl : 컴포넌트의 표시에 사용하는 템플릿 파일의 URL을 지정한다. 여기에서는 app.component.html를 지정하고 있다.

styleUrls : 이것은 스타일 시트의 URL을 지정하는 것이다. 이것은 배열되어 있고, 사용하는 CSS 파일을 모와서 지정한다. 여기에서는 app.component.css 만 사용하도록 되어 있다.

이 중에 가장 중요한 것은 selector와 templateUrl이다. selector는 컴포넌트를 HTML에 배치할 때 사용자 정의 태그명을 지정하고, templateUrl에는 사용하는 템플릿 파일을 지정한다. 이 2가지를 모르면 어떤 파일을 어떻게 수정해야 할지 알 수가 없다.

■ export 의한 클래스 내보내기

그런데, @Component 어노테이션을 붙여서 생성되는 것은 ‘AppComponent “라는 클래스이다. 이는 export class 클래스명이라는 형태로 작성되어 있다. export는 객체 내보내기(외부에서 사용할 수 있도록)하는 것이다. export한 클래스는 import으로 다른 위치에서 로드해서 이용할 수 있다.

여기에서는 AppComponent 클래스를 export할 때에, title이라는 변수에 값을 대입하고 있다. 여기에 대입된 값은 이 후에 템플릿에서 사용할 수 있다.

 

이것으로 AppComponent를 컴포넌트의 기본 소스 코드가 어떻게 되어 있는지 알게 되었다.