[Angular] Service, 의존성 주입

개요

이번 글에서는 서비스에 대한 내용과 의존성 주입에 대한 내용을 정리해볼 것이다!

 

1. 서비스(Service)란?

서비스는 여러 컴포넌트에서 사용하는 공통 기능이나 데이터 요청 로직을 관리하는 클래스이다.

즉, 컴포넌트는 UI만 담당하도록 하고, 복잡한 로직에 경우 서비스에 위임하는 것이다.

 

Angular에서 서비스는 의존성 주입을 통해 컴포넌트 등과 같이 필요한 곳에 자동으로 주입되고, 재사용된다.

 

의존성 주입이라는 용어가 나왔는데, 이게 무엇이냐??

 

안드로이드 모바일 앱 개발이나 스프링에서도 의존성 주입은 있었기 때문에 이미 아는 내용이긴 하지만 또 정리하면 다음과 같다.

 

의존성 주입(Dependency Injection)란?

외부에서 의존 객체를 생성하여 넘겨주는 것!

 

일반적인 객체 생성의 경우에는 클래스 안에서 사용할 객체를 생성하지만, 의존성 주입의 경우 외부에서 생성된 객체를 주입 받는 방식이다.

 

의존성 주입을 사용한다면 클래스 간의 결합도를 낮춤으로 재사용성과 테스트하기 용이하게 된다.

 

Angular는 자체 DI 컨테이너를 가지고 있고, 이 컨테이너는 @Injectable()과 providers 설정을 통해 객체를 생성하고 관리한다.

 

1-1. 서비스 예시

API 호출에 대한 서비스를 생성한다고 하면 다음과 같다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getPosts(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }

  getPostById(id: number): Observable<any> {
    return this.http.get<any>(`${this.apiUrl}/${id}`);
  }
}

 

: @Injectable

-> Angular에게 '이 클래스는 주입 가능한 클래스' 라는 것을 알려준다.

 

: providedIn

-> root의 경우는 앱 전역 싱글턴 객체를 만들어주는 것.

-> 모듈을 넣으면 해당 모듈 범위에서 싱글턴이다.

-> 위 코드에서는 root를 통해 앱 전역에서 사용하도록 했다.