의존성 주입

여러 컴포넌트에 로직이 중복되는 경우에는 Angular가 제공하는 의존성 주입 디자인 패턴을 사용하는 것이 좋습니다. 의존성 주입을 활용하면 재사용할 수 있는 로직을 서비스로 만들어서 컴포넌트에 주입하고, 원본 데이터를 한 곳에서 관리할 수 있습니다.

서비스가 무엇인가요?

서비스(service)는 재사용해야 하는 코드를 의존성으로 주입할 수 있는 형태로 만든 것입니다.

컴포넌트를 선언하는 것과 비슷하게, 서비스는 이렇게 정의합니다:

• TypeScript 데코레이터 - @Service 데코레이터를 사용하면 TypeScript 클래스를 Angular 서비스로 등록할 수 있습니다.
• TypeScript 클래스 - 의존성으로 주입해서 활용할 코드를 정의합니다.

Calculator 서비스 예제를 살펴봅시다.

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

@Service()
export class Calculator {
  add(x: number, y: number) {
    return x + y;
  }
}

서비스는 어떻게 사용하나요?

컴포넌트에서 서비스를 사용하려면:

1. 서비스를 불러옵니다.
2. 불러온 서비스를 클래스 필드로 선언합니다. 이때 inject 함수를 실행하면 원하는 서비스를 의존성 객체로 참조할 수 있습니다.

Receipt 컴포넌트를 살펴봅시다:

import {Component, inject} from '@angular/core';
import {Calculator} from './calculator';

@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculator = inject(Calculator);
  totalCost = this.calculator.add(50, 25);
}

이 예제를 보면, Calculator 서비스를 inject 함수로 불러와서 클래스 필드에 할당했습니다.

다음 단계