Angular 컴포넌트

컴포넌트는 Angular 애플리케이션을 구성하는 가장 기본적인 단위예요. 화면에 보여줄 UI 조각 하나를, 그 조각이 어떻게 동작하고 어떻게 그려질지까지 묶어서 정의하는 방식이죠. 이 페이지에서는 컴포넌트가 어떤 요소로 이루어지는지, 그리고 데코레이터 안에 어떤 정보를 담는지부터 시작해요.

출처: 공식 문서 — Angular 컴포넌트 (Anatomy of components)

컴포넌트는 세 가지로 이루어져요

컴포넌트 하나가 성립하려면 반드시 세 가지가 필요해요.

사용자 입력을 처리하거나 서버에서 데이터를 가져오는 것 같은 **동작(behavior)**을 담은 타입스크립트 클래스
DOM에 무엇을 렌더링할지 정하는 HTML 템플릿
이 컴포넌트가 HTML에서 어떻게 쓰일지 정하는 CSS 셀렉터

이 세 가지를 Angular에 알려주는 게 @Component 데코레이터예요. 타입스크립트 클래스 위에 얹어서 쓰죠.

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
})
export class ProfilePhoto {}

데코레이터에 넘긴 객체를 컴포넌트의 **메타데이터(metadata)**라고 불러요. selector, template 외에도 이 가이드 곳곳에서 설명하는 다양한 속성들이 여기에 들어가요.

스타일과 파일 분리

컴포넌트마다 적용할 CSS 스타일을 목록으로 담을 수도 있어요. 기본적으로 컴포넌트의 스타일은 그 컴포넌트의 템플릿 안에 정의된 요소에만 영향을 줘요.

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `img { border-radius: 50%; }`,
})
export class ProfilePhoto {}

템플릿과 스타일을 별도 파일로 나눠 쓸 수도 있어요. template 대신 templateUrl을, styles 대신 styleUrl을 쓰면 되고, 두 경로 모두 컴포넌트가 위치한 디렉터리를 기준으로 잡혀요.

@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

표현(presentation)과 동작(behavior)을 나누고 싶다면 파일 분리 방식이, 한눈에 보기 편하게 유지하고 싶다면 인라인 방식이 어울려요. 프로젝트 전체에 한 방식을 쓰든, 컴포넌트마다 골라 쓰든 자유예요.

컴포넌트 사용하기

`@Component` 데코레이터의 `imports`

다른 컴포넌트나 디렉티브, 파이프를 템플릿에서 쓰려면 해당 컴포넌트의 imports 배열에 추가해야 해요.

import {ProfilePhoto} from './profile-photo';

@Component({
  // 이 컴포넌트의 템플릿에서 쓰려고 ProfilePhoto를 import
  imports: [ProfilePhoto],
  /* ... */
})
export class UserProfile {}

기본적으로 Angular 컴포넌트는 standalone(독립형)이에요. 그래서 다른 컴포넌트의 imports 배열에 바로 넣을 수 있죠. 이전 버전 Angular로 만든 컴포넌트는 @Component 데코레이터에 standalone: false를 지정했을 수도 있는데, 그런 경우에는 컴포넌트가 정의된 NgModule을 import해야 해요. 참고로 Angular 19.0.0 이전 버전에서는 standalone 옵션의 기본값이 false였어요.

템플릿에서 컴포넌트 보여주기

컴포넌트마다 CSS 셀렉터가 정의되어 있고, 템플릿에 그 셀렉터와 일치하는 HTML 요소를 만들어 주면 Angular가 그 요소마다 컴포넌트 인스턴스를 만들어요. 이렇게 컴포넌트의 셀렉터와 매칭된 DOM 요소를 **호스트 요소(host element)**라고 하고, 컴포넌트 템플릿의 내용은 이 호스트 요소 안쪽에 렌더링돼요.

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

컴포넌트가 렌더링해서 만드는 DOM(즉 그 컴포넌트 템플릿에 해당하는 부분)을 그 컴포넌트의 **뷰(view)**라고 불러요. 이렇게 컴포넌트를 조합하다 보면 Angular 애플리케이션 전체를 컴포넌트의 트리로 바라볼 수 있게 돼요. 이 트리 구조는 의존성 주입이나 자식 쿼리(child queries) 같은 다른 개념을 이해하는 데도 밑바탕이 돼요.

Angular 컴포넌트