analogjs/angular-di

angular-di은(는) 무엇을 하나요?

Angular v20+에서 inject(), 인젝션 토큰(Injection Tokens), 프로바이더(Provider) 구성을 사용한 의존성 주입(Dependency Injection)을 구현합니다. 서비스 아키텍처, 다양한 수준에서의 의존성 제공, 인젝터블 토큰 생성, 싱글톤 및 범위 서비스 관리에 사용됩니다. 서비스 생성, 프로바이더 구성, 인젝션 토큰 사용, DI 계층 구조 이해 시 트리거됩니다.

개요

Angular의 의존성 주입 시스템은 애플리케이션 전반에 걸쳐 의존성을 관리하는 강력한 방법입니다. 이 스킬은 최신 Angular v20+ 기능을 활용하여 효율적이고 유지보수 가능한 서비스 아키텍처를 구축하는 방법을 안내합니다.

주요 기능

• inject() 함수: 생성자 기반 주입 대신 함수 내에서 직접 의존성을 주입할 수 있습니다.
• 인젝션 토큰: 타입 안전한 토큰을 생성하여 서비스나 값을 식별하고 주입합니다.
• 프로바이더 구성: 다양한 수준(루트, 모듈, 컴포넌트)에서 프로바이더를 구성합니다.
• 싱글톤 및 범위 서비스: providedIn 속성이나 프로바이더 배열을 사용하여 서비스의 생명주기를 제어합니다.

사용 방법

1. 기본 서비스 생성

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root', // 애플리케이션 전체에서 싱글톤
})
export class DataService {
  private data: string[] = [];

  getData(): string[] {
    return this.data;
  }

  addData(item: string): void {
    this.data.push(item);
  }
}

2. 인젝션 토큰 사용

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

// 프로바이더 구성
providers: [
  { provide: API_URL, useValue: 'https://api.example.com' }
]

3. inject() 함수로 주입

import { inject } from '@angular/core';

export class UserService {
  private dataService = inject(DataService);
  private apiUrl = inject(API_URL);

  getUsers() {
    return this.dataService.getData();
  }
}

4. 다양한 수준의 프로바이더

컴포넌트 수준에서 프로바이더를 재정의하여 범위 제한:

@Component({
  selector: 'app-user-list',
  template: `...`,
  providers: [
    { provide: DataService, useClass: MockDataService }
  ]
})
export class UserListComponent {
  private dataService = inject(DataService);
}

DI 계층 구조

Angular의 의존성 주입은 계층적 구조를 따릅니다:

1. 루트 인젝터: providedIn: 'root'로 등록된 서비스는 앱 전체에서 공유됩니다.
2. 모듈 인젝터: @NgModule({ providers: [...] })로 등록된 서비스는 해당 모듈 범위 내에서 공유됩니다.
3. 컴포넌트 인젝터: @Component({ providers: [...] })로 등록된 서비스는 해당 컴포넌트와 자식 컴포넌트에서만 유효합니다.

의존성 조회는 현재 컴포넌트에서 시작하여 상위 인젝터로 전파되며, 루트 인젝터까지 찾지 못하면 오류가 발생합니다.

팁

• inject() 함수는 생성자보다 유연하며, 가드나 인터셉터 같은 함수형 코드에서도 사용할 수 있습니다.
• 인젝션 토큰을 사용하면 타입 안전성을 유지하면서 값이나 서비스를 주입할 수 있습니다.
• 범용 서비스는 providedIn: 'root'로 설정하고, 특정 상황에서만 필요한 서비스는 컴포넌트 수준에서 제공하세요.

참고

• Angular 공식 문서 - 의존성 주입
• inject() 함수
• 인젝션 토큰