컴포넌트 기초 - Angular 앱의 기본 단위 이해하기 & 첫 번째 컴포넌트 만들어 보기
서론
Angular에서 컴포넌트는 애플리케이션을 구성하는 가장 기본적인 단위로, UI 요소를 재사용 가능하게 관리할 수 있도록 도와줍니다. 컴포넌트는 Angular 앱의 구조를 설계하고, 데이터를 표시하거나 사용자 입력을 처리하는 역할을 하며 Angular 애플리케이션의 핵심 요소입니다. 이번 글에서는 컴포넌트의 개념과 역할을 이해하고, Angular CLI를 사용해 첫 번째 컴포넌트를 직접 만들어보는 실습까지 진행하겠습니다.
본론
1. 컴포넌트란 무엇인가?
컴포넌트의 개념
Angular에서 컴포넌트는 HTML, CSS, TypeScript 코드가 결합된 UI의 독립적인 구성 요소입니다. 각 컴포넌트는 뷰(View)를 담당하며, 데이터와 화면을 연결하여 애플리케이션의 동작을 구현합니다.
컴포넌트의 구성 요소
- 템플릿 (Template): 컴포넌트가 렌더링할 HTML 구조를 정의합니다. Angular에서는 HTML을 포함하는 템플릿 파일을 사용하여 사용자 인터페이스를 구성합니다.
- 스타일 (Styles): 컴포넌트의 CSS 스타일을 정의하며, Angular는 컴포넌트 단위로 CSS를 적용해 다른 컴포넌트에 영향을 주지 않도록 합니다.
- 클래스 (Class): 컴포넌트의 로직과 데이터를 정의하는 TypeScript 파일입니다. 컴포넌트 클래스는 데이터 속성(Property)과 동작 메서드(Method)를 포함하여, HTML과 데이터가 어떻게 연결되고 동작할지 결정합니다.
Angular의 컴포넌트 구조
Angular 앱은 기본적으로 app.component라는 루트 컴포넌트를 통해 시작합니다. 이 루트 컴포넌트는 다른 하위 컴포넌트를 포함하고 관리하며, 최종적으로 사용자에게 보여지는 화면을 구성하게 됩니다.
2. 첫 번째 컴포넌트 만들어 보기
Angular CLI를 사용해 첫 컴포넌트를 쉽게 생성할 수 있습니다. Angular CLI는 명령어 한 줄로 컴포넌트를 생성하고 필요한 파일들을 자동으로 생성해줍니다.
1) 컴포넌트 생성하기
먼저, 터미널을 열고 프로젝트 루트에서 아래 명령어를 입력하여 greeting
이라는 이름의 컴포넌트를 생성해봅니다.
ng generate component greeting
이 명령어를 실행하면 Angular는 greeting
컴포넌트와 관련된 파일을 src/app/greeting 폴더에 자동으로 생성합니다. 생성된 파일들은 다음과 같습니다:
- greeting.component.ts: 컴포넌트의 로직을 정의하는 TypeScript 파일입니다.
- greeting.component.html: 컴포넌트의 HTML 템플릿 파일로, 화면에 표시될 콘텐츠를 작성합니다.
- greeting.component.css: 컴포넌트의 스타일을 정의하는 CSS 파일입니다.
- greeting.component.spec.ts: 컴포넌트의 유닛 테스트를 작성하는 파일입니다.
2) 생성된 컴포넌트의 구조 이해하기
greeting.component.ts
파일에는 컴포넌트의 기본 클래스와 데코레이터가 포함되어 있습니다. 이 코드가 컴포넌트를 정의하며, 컴포넌트의 템플릿과 스타일이 어떻게 연결되는지 지정합니다.
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
templateUrl: './greeting.component.html',
styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
// 컴포넌트의 데이터와 로직 정의
message: string = "안녕하세요, Angular!";
updateMessage() {
this.message = "컴포넌트의 메시지가 변경되었습니다!";
}
}
- @Component 데코레이터: Angular에 이 클래스가 컴포넌트임을 알려주고, 컴포넌트의 템플릿과 스타일을 연결합니다.
- selector: 컴포넌트를 HTML에서 사용하기 위한 태그 이름을 정의합니다.
- templateUrl: 템플릿 파일을 연결합니다.
- styleUrls: 스타일 파일을 연결합니다.
3) 템플릿에 데이터 바인딩하기
greeting.component.html
파일에 데이터 바인딩을 사용하여 메시지를 표시합니다.
<h2>{{ message }}</h2>
<button (click)="updateMessage()">메시지 변경하기</button>
{{ message }}
: 컴포넌트 클래스에 있는 message
데이터를 HTML에 표시합니다.
(click)="updateMessage()"
: 버튼 클릭 시 updateMessage
메서드를 호출하여 메시지를 변경합니다.
4) 루트 컴포넌트에 추가하기
app.component.html
파일에 <app-greeting></app-greeting>
태그를 추가하여 greeting
컴포넌트를 루트 컴포넌트에 포함시킵니다.
<h1>Angular 앱 시작하기</h1>
<app-greeting></app-greeting>
5) 컴포넌트 실행 확인하기
이제 터미널에서 ng serve
명령어를 실행하고, 브라우저에서 http://localhost:4200
에 접속하여 컴포넌트가 제대로 동작하는지 확인합니다. 안녕하세요, Angular!
라는 메시지가 표시되고, "메시지 변경하기" 버튼을 클릭하면 메시지가 변경됩니다.
결론
이번 글에서는 Angular 컴포넌트의 개념을 이해하고, Angular CLI를 사용하여 첫 컴포넌트를 생성해보았습니다. 컴포넌트는 Angular 앱을 구성하는 기본 단위로, 재사용 가능하고 관리하기 쉬운 구조를 제공합니다. 이제 컴포넌트를 활용해 더 복잡하고 다양한 UI를 구성할 수 있는 기반을 다지셨길 바랍니다. 앞으로 여러 컴포넌트를 활용해 Angular 앱의 다양한 기능을 만들어 보세요.
Q&A 섹션
- Q1: 컴포넌트를 사용하는 이유는 무엇인가요?
A1: 컴포넌트는 UI를 독립적으로 관리할 수 있는 단위로 분리하여, 코드 재사용성과 유지보수성을 높여줍니다.
- Q2: 컴포넌트를 Angular CLI로 생성하면 어떤 파일이 만들어지나요?
A2: .ts
, .html
, .css
, .spec.ts
파일이 생성됩니다. 각각 로직, 템플릿, 스타일, 테스트를 담당합니다.
- Q3: 컴포넌트 간 데이터 전달은 어떻게 하나요?
A3: Angular는 부모-자식 관계의 컴포넌트 간에 @Input
, @Output
데코레이터를 통해 데이터를 전달할 수 있습니다.
관련 태그
- #angular-컴포넌트
- #angular-기초
- #데이터-바인딩
- #angular-cli
- #웹-개발
이 글을 통해 Angular의 컴포넌트 기초를 이해하고, 첫 번째 컴포넌트를 만들고 동작시키는 방법을 익혀보셨길 바랍니다.