Angular - 4 -HTML 렌더링 순서
Angular 애플리케이션이 실행될 때 컴포넌트가 로드되고 HTML이 렌더링되는 과정을 자세히 알아보겠습니다.
✅ 1. Angular 애플리케이션 부트스트랩 과정
Angular 애플리케이션이 실행될 때 가장 먼저 수행되는 과정은 부트스트랩(bootstrap)입니다.
🔹 1) main.ts 실행 (앱 시작)
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic().bootstrapModule(AppModule)을 호출하여 앱을 실행합니다.AppModule이 애플리케이션의 루트 모듈로 등록됩니다.
🔹 2) AppModule에서 AppComponent 부트스트랩
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent], // 컴포넌트 등록
imports: [BrowserModule], // Angular 필수 모듈 로드
bootstrap: [AppComponent] // AppComponent를 루트 컴포넌트로 설정
})
export class AppModule {}
bootstrap: [AppComponent]에 의해 앱이 실행되면AppComponent가 HTML의 루트 컴포넌트가 됩니다.- 이때, Angular는
index.html에서<app-root>태그를 찾아AppComponent를 해당 태그에 렌더링합니다.
✅ 2. HTML 렌더링 순서
📌 1) index.html에서 루트 컴포넌트 찾기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular App</title>
</head>
<body>
<app-root></app-root> <!-- Angular가 이 태그를 찾아 `AppComponent`를 렌더링 -->
</body>
</html>
📌 Angular는 <app-root> 태그를 찾고, 여기에 AppComponent를 렌더링합니다.
📌 2) AppComponent가 로드됨
import { Component } from '@angular/core';
@Component({
selector: 'app-root', // index.html의 <app-root>에 매칭
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular App';
}
📌 설명
selector: 'app-root'→<app-root></app-root>태그와 매칭됨templateUrl: './app.component.html'→ HTML 파일을 로드하여 화면을 구성
📌 3) app.component.html이 렌더링됨
<h1></h1>
<app-dashboard></app-dashboard> <!-- 자식 컴포넌트 -->
📌 설명
- `` → Interpolation(보간법)을 통해
title변수의 값이"Angular App"으로 변환됨. <app-dashboard></app-dashboard>→ 자식 컴포넌트(AppDashboardComponent)를 로드함.
📌 4) AppDashboardComponent 로드됨
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
})
export class AppDashboardComponent {
message = 'Welcome to the Dashboard!';
}
📌 설명
<app-dashboard></app-dashboard>가AppDashboardComponent와 연결됨.dashboard.component.html을 읽고 렌더링함.
<p></p>
message = 'Welcome to the Dashboard!';값이 보간법(``)을 통해 HTML에 표시됨.
✅ 3. 데이터 바인딩과 화면 업데이트 과정
Angular는 데이터 바인딩과 변경 감지(Change Detection) 메커니즘을 사용하여 화면을 렌더링합니다.
🔹 1) 컴포넌트 클래스에서 데이터를 정의
export class ExampleComponent {
name = 'Angular'; // 바인딩할 데이터
}
🔹 2) 템플릿에서 보간법 사용
<h1>Welcome to </h1>
📌 렌더링 결과
<h1>Welcome to Angular</h1>
🔹 3) 속성 바인딩 적용
<img [src]="imageUrl">
📌 설명
imageUrl의 값이 변경되면 Angular가 즉시src속성을 업데이트함.
🔹 4) 이벤트 바인딩 처리
<button (click)="changeMessage()">클릭</button>
<p></p>
export class ExampleComponent {
message = '초기 메시지';
changeMessage() {
this.message = '버튼 클릭됨!';
}
}
📌 클릭 전
<p>초기 메시지</p>
📌 클릭 후
<p>버튼 클릭됨!</p>
Angular는 changeMessage()가 호출되면 message의 값을 업데이트하고 이를 화면에 반영합니다.
✅ 4. Angular HTML 렌더링 순서 정리
📌 Angular가 HTML을 렌더링하는 과정
| 단계 | 동작 |
|---|---|
| 1. 부트스트랩 | main.ts에서 AppModule을 실행 |
| 2. 루트 컴포넌트 찾기 | index.html의 <app-root> 태그를 찾아 AppComponent를 렌더링 |
| 3. 부모 컴포넌트 로드 | AppComponent가 실행되며 app.component.html을 렌더링 |
| 4. 자식 컴포넌트 로드 | <app-dashboard> 등 자식 컴포넌트를 찾아 렌더링 |
| 5. 데이터 바인딩 적용 | ``, [ ], ( ), [( )] 등을 통해 데이터를 화면에 반영 |
| 6. Change Detection (변경 감지) 실행 | 데이터가 변경되면 자동으로 UI를 업데이트 |
✅ 5. 변경 감지(Change Detection)와 렌더링 업데이트
Angular는 Change Detection(변경 감지) 메커니즘을 사용하여 데이터 변경이 발생하면 자동으로 화면을 업데이트합니다.
🔹 변경 감지 과정
- 이벤트 발생 (예: 버튼 클릭)
- 컴포넌트의 데이터 변경 (
this.message = '새로운 메시지';) - Angular의 변경 감지(Zone.js)가 데이터 변경을 감지
- 렌더링 엔진이 변경된 부분을 찾아 UI 업데이트
- 최종적으로 새로운 HTML이 반영됨
✅ 결론
Angular에서 HTML이 렌더링되는 순서는 다음과 같습니다:
1️⃣ main.ts 실행 → AppModule 부트스트랩
2️⃣ index.html에서 <app-root> 찾기 → AppComponent 렌더링
3️⃣ AppComponent 내의 템플릿(app.component.html) 렌더링
4️⃣ 자식 컴포넌트(AppDashboardComponent)가 렌더링됨
5️⃣ 데이터 바인딩(``, [ ], ( ), [( )]) 적용됨
6️⃣ 이벤트 발생 시 변경 감지(Change Detection) → UI 업데이트
댓글남기기