Angular 의존성 주입 - (1) 서비스

서비스 (Service)

사용하는 이유

• 컴포넌트의 독립성을 보장하여 재사용성을 높이기 위해
• 프로젝트의 복잡성을 낮추기 위해
• 특정 기능을 어플리케이션 전역으로 분리하여 사용하기 위해

코드

서비스를 처음 생성하면 아래와 같은 기본 코드가 생성된다.

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

@Injectable({
  providedIn: 'root',
})
export class TempService {
  constructor() { }
}

@Injectable 데코레이터

서비스를 정의하는 클래스 위에 @Injectable이라는 데코레이터가 있다. 이 데코레이터는 Angular가 서비스를 정의하는 이 클래스를 서비스로서 인식하고 Dependency로 주입할 수 있도록 인젝터에 프로바이더로 등록한다.

• provideIn : Angular 6에서 도입된 것으로, 프로퍼티 값으로 root를 설정하면 루트 인젝터에게 서비스를 제공하도록 지시한다. 이 경우, 싱글톤으로 생성되어 앱 전역에서 서비스를 Injection할 수 있게 한다.

서비스를 컴포넌트에서 사용하기

// 의존성 주입 패턴
constructor(private tempService: TempService) {} // Angular에게 인스턴스 주입 위임
// 위와 같이 생성자 파라미터에 접근 제한자를 선언하면 프로퍼티로 생성된다.

// 사용하지 말아야 할 패턴
tempService: TempService; // Property 생성
constructor() {
    this.tempService = new TempService(); // 직접 인스턴스 생성하고 할당
}

두 번째 코드와 같이 컴포넌트에서 서비스의 인스턴스를 생성하면, 서비스와 컴포넌트는 긴밀한 결합을 하게 된다. 이 경우 컴포넌트와 서비스가 서로 크게 의존하게 되어, 하나의 객체를 변경하면 다른 하나의 객체 또한 변경하여야 한다. 이는 큰 프로젝트일 수록 변경점을 확인하고 수정점에 대해 대응하기가 어렵다.

이를 해결하기 위해 인스턴스 생성을 Angular에서 하고, 그 인스턴스를 Angular가 컴포넌트에 주입해주는 첫 번째 코드 즉, 인스턴스 주입 방식을 이용한다. → 느슨한 결합

앞서 설명했던 provideIn: 'root' 가 느슨한 결합을 구현하기 위해 Angular에게 인스턴스 생성 주체를 위임하는 것이다.

서비스는 항상 컴포넌트에서만 사용할 수 있는 것은 아니므로, 앞으로는 구성요소라고 칭합니다.