프로그래밍/Angular

3일차: Angular 16 컴포넌트란 무엇인가?

재우니 2024. 11. 9. 08:49

컴포넌트 기초 - Angular 앱의 기본 단위 이해하기 & 첫 번째 컴포넌트 만들어 보기

서론

Angular에서 컴포넌트는 애플리케이션을 구성하는 가장 기본적인 단위로, UI 요소를 재사용 가능하게 관리할 수 있도록 도와줍니다. 컴포넌트는 Angular 앱의 구조를 설계하고, 데이터를 표시하거나 사용자 입력을 처리하는 역할을 하며 Angular 애플리케이션의 핵심 요소입니다. 이번 글에서는 컴포넌트의 개념과 역할을 이해하고, Angular CLI를 사용해 첫 번째 컴포넌트를 직접 만들어보는 실습까지 진행하겠습니다.

본론

1. 컴포넌트란 무엇인가?

컴포넌트의 개념

Angular에서 컴포넌트는 HTML, CSS, TypeScript 코드가 결합된 UI의 독립적인 구성 요소입니다. 각 컴포넌트는 뷰(View)를 담당하며, 데이터와 화면을 연결하여 애플리케이션의 동작을 구현합니다.

컴포넌트의 구성 요소

  1. 템플릿 (Template): 컴포넌트가 렌더링할 HTML 구조를 정의합니다. Angular에서는 HTML을 포함하는 템플릿 파일을 사용하여 사용자 인터페이스를 구성합니다.
  2. 스타일 (Styles): 컴포넌트의 CSS 스타일을 정의하며, Angular는 컴포넌트 단위로 CSS를 적용해 다른 컴포넌트에 영향을 주지 않도록 합니다.
  3. 클래스 (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의 컴포넌트 기초를 이해하고, 첫 번째 컴포넌트를 만들고 동작시키는 방법을 익혀보셨길 바랍니다.

 

 

 

 

 

저작자표시 비영리 동일조건