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

Question

Accepted Answer

**standalone 컴포넌트**(Angular 14+, 최신 버전에서 기본값)는 컴포넌트가 `NgModule`에 속할 필요 없이 **자신의 의존성을 직접 선언**하게 해줍니다. 보일러플레이트를 극적으로 줄이며, 이제 Angular 앱을 구축하는 권장 방법입니다. ## standalone 컴포넌트 ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← NgModule 불필요 imports: [CommonModule, RouterLink], // ← 의존성을 여기, 컴포넌트에 선언 template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` 컴포넌트는 자신의 템플릿이 사용하는 것을 정확히 import합니다(`*ngFor`를 위한 `CommonModule`, 링크를 위한 `RouterLink`). 의존성이 별도의 NgModule에 선언되는 대신, 명시적이고 같은 위치에 있습니다. ## NgModule과의 대비 ```text NgModule 접근법: standalone 접근법: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → 추가 파일, 간접 참조 → 모든 것이 한 곳에 ``` ## standalone 앱 부트스트랩 (AppModule 없음) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // 함수형으로 라우터 구성 provideHttpClient(), // HttpClientModule 없이 HttpClient ], }); ``` standalone 앱은 루트 `AppModule`을 `bootstrapApplication`과 **`provideX`** 함수로 대체합니다. 더 깔끔하고 함수 기반의 구성입니다. ## 이점 ```text ✓ 보일러플레이트 감소 — 유지보수할 NgModule 파일 없음 ✓ 명시적 의존성 — 컴포넌트가 무엇을 사용하는지 정확히 보임 ✓ 더 쉬운 lazy loading — loadComponent() 직접 ✓ 더 단순한 멘탈 모델 — 컴포넌트가 독립적인 단위 ✓ 더 나은 tree-shaking 잠재력 ``` ## 왜 중요한가 standalone 컴포넌트는 **Angular의 현대적 방향**입니다. 프레임워크는 이제 기본적으로 standalone을 생성하고, 모듈 없이 기능을 구성할 수 있는 `provideX` 함수를 제공합니다. 오래된 NgModule 오버헤드를 제거하고, 의존성을 명시적이고 지역적으로 만들며, lazy loading과 전반적인 멘탈 모델을 단순화합니다. standalone(그리고 `bootstrapApplication`/`provideRouter`/`provideHttpClient` 설정)을 이해하는 것은 현재 Angular에서 작업하는 데 필수적이며, NgModule 지식은 레거시 코드를 위해 여전히 필요합니다.