Angular Standalone

Angular Standalone

Angular 14 버전부터 도입된 standalone 컴포넌트는 기존의 NgModule을 생략하고 개별 컴포넌트에서 직접 의존성을 관리하는 새로운 방식입니다. 기존의 NgModule 구조에서는 여러 컴포넌트를 하나의 모듈로 묶어야 했지만, standalone 컴포넌트는 각 컴포넌트를 독립적으로 작성해 관리할 수 있게 만들어 줍니다.

이 접근 방식은 Angular 애플리케이션의 모듈 관리와 구조를 더욱 유연하게 만들어 주며, 특히 특정 컴포넌트의 독립성 및 테스트 용이성을 크게 개선합니다.

 

Standalone 컴포넌트의 필요성

Angular는 오랜 기간 동안 모듈(NgModule) 중심의 아키텍처를 사용해 왔습니다.

이 구조는 대규모 애플리케이션에서 컴포넌트와 서비스의 의존성을 체계적으로 관리할 수 있도록 해줍니다.

하지만 NgModule의 복잡성은 경우에 따라 개발 생산성을 저해할 수 있었습니다.

Standalone 컴포넌트는 이러한 문제점을 해결하고 컴포넌트의 독립적 사용을 보다 쉽게 하기 위해 도입되었습니다.

 

Standalone 컴포넌트의 장점

(1) 코드 간소화와 유지보수성 향상
Standalone 컴포넌트를 사용하면 개별 컴포넌트가 자체적으로 의존성을 관리할 수 있어, 모듈을 작성하고 가져오는 과정이 줄어듭니다. 이를 통해 코드가 간결해지고 유지보수성이 높아집니다.

(2) 더 쉬워진 테스트
컴포넌트 단위로 독립적인 관리가 가능하므로, 테스트 시에도 모듈 설정이나 복잡한 의존성 주입 설정 없이 컴포넌트만 집중적으로 테스트할 수 있습니다.

(3) 향상된 성능
모듈을 사용하는 경우 모듈 내의 모든 컴포넌트가 한 번에 로드될 수 있지만, Standalone 방식에서는 필요한 컴포넌트만 개별적으로 불러올 수 있어 초기 로딩 속도와 성능이 개선됩니다.

 

Standalone 컴포넌트의 단점

(1) 기존 NgModule 구조와의 호환성 이슈
기존 NgModule 방식으로 작성된 코드와 Standalone 컴포넌트를 함께 사용할 경우 호환성 문제가 발생할 수 있습니다. 이를 해결하기 위해서는 Angular 전반적인 구조와 설정을 변경해야 할 수도 있습니다.

(2) 프로젝트 구조의 일관성 문제
대규모 프로젝트의 경우 Standalone과 NgModule이 혼재되면 일관성을 잃을 수 있어, 전체 프로젝트의 구조를 처음부터 결정해야 할 필요가 있습니다.

 

---

Standalone 컴포넌트 예제

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-standalone-example',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div>
      <h1>Standalone 컴포넌트 예제</h1>
      <p>이 컴포넌트는 모듈 없이 동작합니다.</p>
    </div>
  `
})
export class StandaloneExampleComponent {}

 

standalone: true 옵션이 추가되어 있고, imports 배열을 통해 필요한 의존성을 직접 관리할 수 있습니다.

CommonModule을 직접 가져와서 컴포넌트 내에서 사용 가능하도록 설정한 것을 확인할 수 있습니다.

 

Standalone 컴포넌트를 라우팅에 사용하는 방법

Standalone 컴포넌트는 Angular 라우터와도 쉽게 통합할 수 있습니다.

import { Routes } from '@angular/router';
import { StandaloneExampleComponent } from './standalone-example.component';

const routes: Routes = [
  {
    path: 'standalone',
    component: StandaloneExampleComponent,
  },
];

 

---

기존 NgModule 방식과의 비교

기존 방식

@NgModule({
  declarations: [SomeComponent],
  imports: [CommonModule],
  exports: [SomeComponent]
})
export class SomeModule {}

 

Standalone 방식

@Component({
  standalone: true,
  imports: [CommonModule],
  template: `<p>Standalone Component</p>`
})
export class SomeComponent {}

 

 

기존 방식은 SomeComponent를 SomeModule에 포함시켜야 했습니다.

Standalone 컴포넌트 방식에서는 SomeComponent가 모듈에 의존하지 않으므로, 필요한 의존성만 컴포넌트에 선언하여 사용할 수 있습니다.

 

결론

Standalone 컴포넌트는 특정 상황에서 매우 유용하지만, 기존 Angular 모듈 시스템과 혼합하여 사용하는 데는 신중한 설계가 필요합니다. 특히 큰 규모의 프로젝트에서는 각 컴포넌트가 NgModule을 사용할지 Standalone으로 작성할지를 미리 결정하고, 일관성 있게 사용하는 것이 좋습니다.