여러 컴포넌트에 로직이 중복되는 경우에는 Angular가 제공하는 의존성 주입 디자인 패턴을 사용하는 것이 좋습니다. 의존성 주입을 활용하면 재사용할 수 있는 로직을 서비스로 만들어서 컴포넌트에 주입할 수 있습니다.
서비스가 무엇인가요?
서비스(service)는 재사용해야 하는 코드를 의존성으로 주입할 수 있는 형태로 만든 것입니다.
컴포넌트를 선언하는 것과 비슷하게, 서비스는 이렇게 정의합니다:
- TypeScript 데코레이터 -
@injectable데코레이터를 사용하면 TypeScript를 Angular 서비스로 등록할 수 있습니다. 이 데코레이터를 사용할 때providedIn프로퍼티를'root'로 지정하면 애플리케이션 전역에서 이 서비스를 활용할 수 있습니다. - TypeScript 클래스 - 의존성으로 주입해서 활용할 코드를 정의합니다.
Calculator 서비스 예제를 살펴봅시다.
import {Injectable} from '@angular/core';@Injectable({providedIn: 'root'})export class Calculator { add(x: number, y: number) { return x + y; }}
서비스는 어떻게 사용하나요?
컴포넌트에서 서비스를 사용하려면:
- 서비스를 불러옵니다.
- 불러온 서비스를 클래스 필드로 선언합니다. 이 때
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 함수로 불러와서 클래스 필드에 할당했습니다.