Angular2 컴포넌트 기본 코드

Angular는 컴포넌트가 기본이다. 이것은 HTML, 스크립트, 스타일시트 파일로 구성된다. 그 기본을 설명한다.
Tags:

app.component.ts

앞에서 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를 컴포넌트의 기본 소스 코드가 어떻게 되어 있는지 알게 되었다.

HTML과 스타일 시트

앞에서 스크립트에 대해서 설명을 하였다면, 이제 HTML과 CSS에 대해서 설명하겠다.

app.component.html app.component.html이 어떻게 되어 있는지 보면 아래와 같다.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
.... 이하 생략 ...

<h1> 태그를 출력하고 있고, 해당 콘텐츠는 {{ title }}이라는 것이 작성되어 있다. 이 {{}}라는 기호는 JavaScript 문장을 작성해서 그 결과를 출력하는데 사용된다.

여기에서는 title 값을 출력하며, 이것은 앞에서 작성한 스크립트에서 작성한 export class에서 만든 변수이다. 스크립트에서 만든 변수를 템플릿에서 이와 같이 이용할 수 있는 것이다.

나머지 생략된 부분에는 로그 이미지 및 Angular와 관련된 몇가지 링크들이 있다. 이는 특별한 것이 없기 때문에 넘어간다.

app.component.css
다음으로 스타일 시트(app.component.css)을 열어 보면, 내용이 비어 있다. 여기에 필요에 따라 스타일을 작성하면 된다.

사용자 정의 표시

여기서 컨포넌트의 기본 구조 알았다. 그럼 약간의 응용하여 컴포넌트의 표시를 약간 수정하여 보자.

아래에 app.component.html과 app.component.css 예제는 아래와 같다.

app.component.html

<div class="rect">
    <h1>AppComponent</h1>
    <p>{{'이것은, "' + title + '"라는 컴포넌트입니다.'}}</p>
</div>

app.component.css

.rect {
    border: 1px solid lightgray;
    padding: 10px 5px;
    margin: 10px 5px;
    color: darkgray;
}

이와 같이 파일을 수정하여 응용 프로그램을 다시 표시해 보자. 이번에는 사각형 테두리 안에 제목과 메시지가 표시된다.

여기에서는 app.component.css에 rect라는 클래스를 정의해 두고, 이를 app.component.html 에서 <div class="rect">와 같이 지정하여 사용하고 있다. 이것으로 HTML과 스타일 시트를 다시 쓰는 것만으로 간단히 컨포넌트의 표시를 사용자 정의할 수 있다.

그런데, HTML 파일의 템플릿에는 app.component.css을 읽어 오기 위한 태그가 없는 것을 이상하게 생각한 사람도 있을지도 모른다. 이는 app.component.ts 스크립트에서 @Component 어노테이션으로 이렇게 설정되어 있었다.

styleUrls: ['app.component.css']

이것으로 스타일 시트를 로드되기에, 스타일 시트를 로드하는 태그를 따로 작성할 필요가 없는 것이다.




최종 수정 : 2017-12-27