Angular 애플리케이션은 컴포넌트로 구성되어 있습니다. 컴포넌트는 화면에 표시될 데이터와 사용자 이벤트를 처리하는데 사용됩니다. 여러 컴포넌트를 조합하여 Angular 애플리케이션을 구성할 수 있습니다.

컴포넌트 생성

Angular CLI를 사용하여 새로운 컴포넌트를 생성할 수 있습니다. 다음 명령어를 사용하여 컴포넌트를 생성할 수 있습니다.

ng generate component <component-name>

예를 들어, user라는 이름의 컴포넌트를 생성하려면 다음과 같이 명령어를 실행할 수 있습니다.

ng generate component user

컴포넌트 구성

각 컴포넌트는 TypeScript 파일(.ts), HTML 파일(.html), CSS 또는 SCSS 파일(.css 또는 .scss), 그리고 테스트 파일을 포함하고 있습니다. 이들 파일은 컴포넌트의 동작과 뷰를 정의하는데 사용됩니다.

TypeScript 파일

컴포넌트의 동작은 TypeScript 파일에 정의되어 있습니다. 이 파일은 컴포넌트 클래스를 포함하고, 데이터 및 동작을 정의합니다.

import { Component } from '@angular/core';
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  // 컴포넌트 로직이 여기에 위치함
}

HTML 파일

HTML 파일은 사용자에게 보여지는 뷰를 정의합니다. 이 파일은 컴포넌트의 모양과 레이아웃을 정의합니다.

<p>
  user 컴포넌트가 보여줄 내용
</p>

CSS 또는 SCSS 파일

CSS 또는 SCSS 파일은 컴포넌트의 스타일을 정의합니다. 이 파일은 컴포넌트의 스타일링을 담당합니다.

p {
  font-size: 16px;
  color: #333;
}

컴포넌트 조합

다양한 컴포넌트를 생성하고, 이들을 모두 하나의 애플리케이션으로 조합하여 강력한 UI와 사용자 경험을 제공할 수 있습니다.

이것이 바로 Angular의 컴포넌트 기반 아키텍처가 가져다주는 이점 중 하나입니다.

컴포넌트 기반 아키텍처의 장점에 대해 더 알아보려면 Angular 컴포넌트 기반 아키텍처 문서를 참고하세요.