Angular 컴포넌트란 무엇인가요?

Question

Accepted Answer

**컴포넌트**는 Angular UI의 기본 빌딩 블록으로, 화면의 한 영역(그 "뷰")을 제어하는, `@Component`로 장식된 TypeScript **클래스**입니다. 모든 Angular 앱은 컴포넌트의 트리입니다. ## 컴포넌트의 구조 ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // 커스텀 HTML 태그: templateUrl: "./user-card.html", // 뷰 (또는 인라인 `template: '...'`) styleUrls: ["./user-card.css"], // 이 컴포넌트에만 적용되는 스타일 }) export class UserCardComponent { name = "Ann"; // 속성 → 템플릿에서 사용 가능 greet() { return `Hi ${this.name}`; } // 메서드 → 템플릿에서 호출 가능 } ``` `@Component` decorator는 세 가지를 함께 연결합니다. **selector**(HTML에서 사용하는 방법), **template**(마크업), 그리고 **styles**(이 컴포넌트에 한정된 스타일)입니다. ## 클래스는 로직과 데이터를 담는다 ```html

``` 클래스의 public 속성과 메서드는 바인딩을 통해 템플릿에서 직접 접근할 수 있습니다. 이것이 Angular가 데이터와 뷰를 연결하는 방식의 핵심입니다. ## 컴포넌트 사용하기 ```html ``` ## 스타일은 기본적으로 캡슐화된다 ```css /* user-card.css — 이 스타일은 오직 이 컴포넌트에만 영향을 준다 */ h2 { color: blue; } /* 다른 컴포넌트의

로 새어 나가지 않음 */ ``` Angular는 컴포넌트 스타일을 자동으로 한정(View Encapsulation)하므로, CSS가 컴포넌트 사이로 새어 나가지 않습니다. ## 왜 중요한가 컴포넌트는 모든 Angular 앱을 구조화하는 방법입니다. 템플릿 + 로직 + 한정된 스타일이 결합된 독립적인 단위이며, 트리 형태로 구성됩니다. `@Component` decorator(selector, template, styles)와 클래스의 속성/메서드가 템플릿에 바인딩되는 방식을 이해하는 것은 Angular 개발의 절대적 기초이며, 다른 모든 것은 이 컴포넌트 모델 위에 세워집니다.