[Angular] Component 구조

1. 컴포넌트의 코드 구조

컴포넌트는 임포트, @Component 데코레이터, 컴포넌트 클래스 영역으로 구분할 수 있다.

 

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

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

Import Area

- 컴포넌트에 필요한 의존 모듈을 임포트한다. Angular가 제공하는 Angular 라이브러리 모듈의 경우 @가 붙어있어서 경로를 명시하지않는다. 또한 npm을 사용하여 설치한 의존 모듈도 경로를 명시하지않는다. 그 이외의 경우 상대경로를 명시해야한다.

 

@Component Decorator Area

- 메타데이터 객체를 인자로 전달한다. 메타데이터 객체는 컴포넌트 생성에 필요한 정보(Selector, template, style definition 등)를 담고 있다. 예시로 메타데이터 객체의 templateUrl Property에는 컴포넌트의 뷰를 정의한 템플릿의 상대 경로를 설정한다.

 

Component Class Area

컴포넌트 뷰를 관리하기 위한 로직을 담은 클래스를 정의한다. 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰의 관리에 집중해야 하며 애플리케이션 공통 관심사는 서비스로 분리하여야 한다.

 

2. 컴포넌트의 동작 구조

- src/app/app.component.html

...
	<h1>
    	Welcome to {{title}}!
	</h1>
...

 

템플릿은 컴포넌트의 뷰를 정의하기 위해 HTML과 Angular 고유의 템플릿 문법으로 작성한다. {{title}}은 템플릿 문법 중 하나인 인터폴레이션(=interpolation)으로 컴포넌트 클래스의 데이터를 템플릿에 바인딩하고 이러한 방식을 데이터 바인딩이라고 한다.

 

- src/app/app.component.ts

...
export class AppComponent {
  title = 'foodiv-frontend';
}

 

컴포넌트는 데이터 바인딩에 의해 템플릿과 컴포넌트 클래스의 데이터를 유기적으로 연계한다.