Angular Standalone: 모듈 없는 Angular 개발의 시작

Angular 14에서 도입된 Standalone API는 기존의 NgModule 중심의 구조를 대체하거나 보완하는 새로운 개발 패러다임입니다. Standalone 컴포넌트, 디렉티브, 파이프를 사용하면 모듈 선언 없이 독립적으로 동작하는 애플리케이션을 만들 수 있어 코드가 간결해지고 설정이 단순해집니다. 이 포스트에서는 Angular Standalone의 개념, 장점, 그리고 간단한 예제를 정리합니다.

Standalone이란?

Standalone은 Angular에서 NgModule 없이 컴포넌트, 디렉티브, 파이프를 독립적으로 사용할 수 있게 해주는 기능입니다. 기존에는 모든 컴포넌트가 NgModule에 선언되어야 했지만, Standalone API를 사용하면 모듈 없이도 컴포넌트를 바로 부트스트랩하거나 다른 컴포넌트에 임포트할 수 있습니다.

주요 특징

• NgModule 불필요: 컴포넌트, 디렉티브, 파이프를 독립적으로 정의 가능.
• 간결한 설정: 모듈 파일을 작성하지 않아도 됨.
• 트리 쉐이킹(Tree Shaking): 사용하지 않는 코드를 더 효과적으로 제거해 번들 크기 최적화.
• 유연한 구성: 기존 NgModule 기반 코드와 혼합 사용 가능.

Standalone 컴포넌트 생성

Standalone 컴포넌트를 생성하려면 @Component 데코레이터에 standalone: true를 추가합니다. 아래는 간단한 Standalone 컴포넌트 예제입니다.

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true, // Standalone 컴포넌트로 선언
  imports: [CommonModule], // 필요한 모듈 임포트
  selector: 'app-root',
  template: `
    <h1>안녕하세요, Angular Standalone!</h1>
    <p>이 컴포넌트는 모듈 없이 동작합니다.</p>
  `,
})
export class AppComponent {}

위 코드에서:

• standalone: true로 컴포넌트를 독립적으로 만듦.
• imports 속성에 필요한 Angular 모듈(예: CommonModule)을 직접 추가.

Standalone 애플리케이션 부트스트래핑

Standalone 컴포넌트를 애플리케이션의 루트로 부트스트랩하려면 main.ts에서 bootstrapApplication 함수를 사용합니다.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

 

기존의 AppModule 없이 AppComponent를 바로 부트스트랩합니다. 이 방식은 설정을 간소화하고 초기 진입점을 명확히 합니다.

다른 Standalone 컴포넌트 사용

Standalone 컴포넌트를 다른 컴포넌트에서 사용하려면 imports에 추가하면 됩니다. 예를 들어, ChildComponent를 AppComponent에서 사용하려면:

 

// child.component.ts
import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-child',
  template: `<p>자식 컴포넌트입니다!</p>`,
})
export class ChildComponent {}

 

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent } from './child.component';

@Component({
  standalone: true,
  imports: [CommonModule, ChildComponent], // ChildComponent 임포트
  selector: 'app-root',
  template: `
    <h1>Standalone 애플리케이션</h1>
    <app-child></app-child>
  `,
})
export class AppComponent {}

Standalone의 장점

1. 코드 간소화: NgModule 파일을 작성할 필요가 없어 코드량 감소.
2. 빠른 개발: 간단한 프로젝트에서 설정 시간이 단축됨.
3. 마이그레이션 용이: 기존 NgModule 기반 프로젝트와 혼합 사용 가능.
4. 번들 최적화: 사용하지 않는 모듈을 자동으로 제외해 성능 향상.

한계와 주의점

• 복잡한 프로젝트: 대규모 프로젝트에서는 NgModule이 여전히 유용할 수 있음.
• 학습 곡선: 기존 Angular 개발자는 새로운 워크플로우에 적응해야 함.
• 호환성: Angular 14 이상에서만 사용 가능.

언제 사용해야 할까?

• 소규모 프로젝트: 빠르게 프로토타입을 만들 때.
• 마이크로 프론트엔드: 독립적인 컴포넌트 단위로 개발할 때.
• 모듈 간소화: 불필요한 모듈 설정을 줄이고 싶을 때.

마무리

Angular Standalone은 Angular 개발을 더 간결하고 유연하게 만들어주는 강력한 기능입니다. NgModule 없이도 컴포넌트를 독립적으로 구성할 수 있어, 특히 소규모 프로젝트나 마이크로 프론트엔드 환경에서 유용합니다. 기존 NgModule 기반 코드와도 혼합 가능하니, 점진적으로 도입해보는 것을 추천합니다.

Angular Standalone을 사용해보고 싶다면, Angular CLI로 새 프로젝트를 생성하고 --standalone 플래그를 사용해 시작해보세요:

 

ng new my-app --standalone

 

 

더 궁금한 점이 있다면 Angular 공식 문서를 참고하세요!