[Angular] Component 개요

개요

Angular CLI를 통해 Angular 프로젝트를 만드는 방법에 대해서는 정리가 끝났으니까, 이제 Angular를 활용해 나만의 프로젝트를 만들 수 있는 이론적인 지식들을 쌓아나아가야겠지? 그 첫 번째가 바로 Component에 대한 내용이다.

1. Angular Component란?

컴포넌트는 Angular의 기본적인 UI 단위로, HTML 템플릿과 TypeScript 로직을 결합해 독립적인 UI 요소를 만들 수 있도록 설계된 구조이다.

 

Angular 애플리케이션은 여러 개의 컴포넌트로 이루어지고, 컴포넌트는 계층적으로 구성될 수 있다.

 

1-1. Component 구조

Angular의 컴포넌트는 크게 3가지에 주요 요소로 구성된다.

 

1) Template

-> HTML을 기반으로 컴포넌트의 UI를 정의하는 부분이다.

-> 프로젝트를 처음 만들면 나오는 app.component.html

 

2) Class

-> TypeScript 코드로 컴포넌트의 로직과 데이터를 정의하는 부분이다.

-> app.component.ts

 

3) Styles

-> CSS, SCSS, LESS 등을 이용해 컴포넌트의 스타일을 적용하는 부분이다.

-> app.component.css

 

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

@Component({
  selector: 'app-root', // 이 컴포넌트를 사용할 때의 태그명
  templateUrl: './app.component.html', // HTML 템플릿 파일
  styleUrls: ['./app.component.css'], // CSS 스타일 파일
})
export class AppComponent {
  title = 'Angular Component';
}

 

위의 코드는 아래 부분에 데코레이터를 정리하면서 자세히 다룰 것이다.

 

1-2. Component 생성 방법

Angular에서 컴포넌트를 생성하는 방법은 직접 생성하는 방법, CLI를 통해 생성하는 방법 등이 있는데 직접 생성은 단순히 파일을 직접 생성해주면 되기 때문에 CLI를 통해 생성하는 방법만 정리하겠다.

CLI를 통해 생성

ng generate component 컴포넌트이름
# 또는
ng g c 컴포넌트이름

 

예를 들어, header라는 컴포넌트를 만들고 싶으면

ng g c header

 

이렇게 만든다면 아래 사진처럼 필요한 구성 요소들을 자동으로 만들어준다.

 

1-3. @Component 데코레이터

데코레이터(Decorator)

Angular에서 데코레이터는 클래스, 속성, 메서드, 매개변수 등에 메타데이터를 추가하는 역할을 하는 TypeScript의 기능이다.

 

@Component

컴포넌트를 정의하는 데 사용되는 데코레이터이다.

 

주요 속성으로는 아래와 같은 것들이 있다.

selector	HTML에서 사용할 태그 이름을 지정
template	컴포넌트의 HTML을 직접 작성
templateUrl	HTML 파일을 별도로 연결
styleUrls	CSS 파일을 별도로 연결
styles	CSS 스타일을 직접 작성
providers	해당 컴포넌트에서만 사용할 서비스를 등록
animations	Angular 애니메이션을 설정
viewEncapsulation	CSS 범위 설정 (Shadow DOM 등)
changeDetection	변경 감지 전략을 지정
standalone	독립형 컴포넌트로 설정 (Angular 14+)

 

실제 CLI를 통해 컴포넌트를 생성하면 아래와 같이 @Component 데코레이터 속성이 정의된다.

 

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

@Component({
  selector: 'app-header',
  imports: [],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

 

: selector 

-> HTML에서 이 컴포넌트를 <app-header> </app-header> 형태로 사용 가능하도록 설정하는 부분

 

: imports

-> Angular 14+ 이상에서 사용하며 다른 컴포넌트, 모듈을 가져오는 속성이다.

 

: templateUrl

-> 이 컴포넌트가 사용할 HTML 파일을 지정한다.

 

: styleUrls

-> 이 컴포넌트가 사용할 CSS 파일을 지정한다.