@Injectable

@Injectable({ providedIn: 'root' }) 데코레이터를 사용한 이유와 그 동작을 상세하게 설명해드릴게요.

Angular에서 @Injectable() 데코레이터는 서비스 클래스가 의존성 주입(Dependency Injection)을 받을 수 있는 클래스임을 나타내는 역할을 합니다. providedIn 속성을 사용하면 Angular가 서비스 인스턴스를 어떤 범위에서 생성할지 결정할 수 있습니다.

1. @Injectable({ providedIn: 'root' }) 사용 이유:

   • 앱의 전역에서 하나의 인스턴스를 공유하려면 providedIn: 'root'로 설정합니다.
   • 이렇게 하면 Angular가 앱의 루트 모듈에 프로바이더로서 서비스를 등록하게 됩니다.
   • 이에 따라 모든 컴포넌트 및 서비스가 동일한 인스턴스를 사용하며, 인스턴스의 라이프사이클은 애플리케이션의 라이프사이클과 일치합니다.

2. 동작:

   • 애플리케이션이 시작될 때, Angular 모듈 로더는 providedIn: 'root'로 설정된 서비스를 인식하고 해당 서비스의 인스턴스를 생성합니다.
   • 이 인스턴스는 애플리케이션의 루트 모듈에 등록되어 애플리케이션 전체에서 공유됩니다.
   • 이후에 서비스를 주입받는 컴포넌트나 다른 서비스들은 동일한 인스턴스를 공유하여 사용하게 됩니다.

즉, @Injectable({ providedIn: 'root' })를 사용하면 애플리케이션 전체에서 동일한 인스턴스를 공유하는 싱글톤 패턴을 간단하게 구현할 수 있습니다. 이를 통해 메모리 사용량을 최적화하고, 각 요소 간에 데이터 일관성을 유지할 수 있게 됩니다.