🚀 Angular에서 await 사용 시 주의사항 5가지

1. RxJS Observable과의 혼용 주의

Angular의 핵심은 Observable입니다. toPromise()(구버전)나 firstValueFrom, lastValueFrom(신버전)을 사용하여 Observable을 Promise로 변환해 await할 수 있지만, 이때 스트림의 특성을 잃게 됩니다.

• 문제점: await은 단 한 번의 값만 반환합니다. 실시간 채팅이나 소켓 연결처럼 데이터가 계속 들어오는 스트림에는 await을 사용하면 안 됩니다.
• 해결책: 지속적인 데이터 흐름이 필요하다면 subscribe()나 async 파이프를 유지하세요.

2. Zone.js와 변화 감지(Change Detection)

Angular는 Zone.js를 통해 비동기 작업이 끝나는 시점을 감지하고 화면을 갱신합니다.

• 문제점: await을 사용하면 해당 라인에서 실행이 일시 중지됩니다. 만약 NgZone.runOutsideAngular() 내부에서 비동기 작업을 수행하고 await으로 기다린다면, 그 이후의 코드들이 Angular의 변화 감지 범위 밖에서 실행되어 화면이 업데이트되지 않을 수 있습니다.
• 해결책: 비동기 작업 후 UI 업데이트가 필요하다면 NgZone.run()으로 다시 감싸주거나, 명시적으로 ChangeDetectorRef.detectChanges()를 호출해야 할 때가 있습니다.

3. Lifecycle Hooks에서의 동작 방식

ngOnInit 같은 라이프사이클 훅에 async를 붙이는 경우를 주의해야 합니다.

• 문제점: Angular는 라이프사이클 메서드가 Promise를 반환하든 말든 기다려주지 않습니다.

  async ngOnInit() {
    await this.getData(); // 여기서 멈추지만, Angular는 이미 렌더링을 시도함
    this.isLoaded = true;
  }
  

   

• 결과: 데이터가 오기 전에 템플릿이 이미 렌더링되므로, 초기값 설정이 제대로 안 되어 있으면 undefined 에러가 발생할 수 있습니다. *ngIf 등으로 방어 코드를 짜는 것이 필수입니다.

4. 에러 핸들링 (Try-Catch)

RxJS에서는 .pipe(catchError(...))로 깔끔하게 에러를 처리하지만, await은 전통적인 try-catch 문을 사용해야 합니다.

• 주의사항: await을 쓸 때 try-catch로 감싸지 않으면, 에러 발생 시 Uncaught (in promise) 에러가 발생하며 이후 코드가 실행되지 않습니다.
• 팁: 전역 에러 핸들러(ErrorHandler)가 있더라도, 로컬 수준에서의 흐름 제어를 위해 try-catch를 습관화하세요.

5. 병렬 실행의 이점 활용하기

여러 개의 API를 호출할 때 무심코 await을 연달아 쓰면 워터폴(Waterfall) 현상이 발생해 성능이 저하됩니다.

• 나쁜 예:

  const user = await this.userService.get(); // 1초 소요
  const settings = await this.settingService.get(); // 1초 소요 (총 2초)
  

• 좋은 예:

  const [user, settings] = await Promise.all([
    this.userService.get(),
    this.settingService.get()
  ]); // 총 1초 소요
  

---

💡 요약: 언제 무엇을 쓸까?

상황	추천 방식	이유
단일 API 호출	await 또는 subscribe	취향 차이이나 코드는 await이 깔끔함
연속적인 데이터 스트림	Observable (subscribe)	await은 일회성임
여러 API 병렬 처리	forkJoin 또는 Promise.all	성능 최적화
템플릿 바인딩	async 파이프	메모리 누수 방지 및 자동 변화 감지

---

"Angular에서 async/await은 가독성을 높여주는 훌륭한 도구지만, 프레임워크의 반응형 설계 원칙을 이해하고 사용하는 것이 중요합니다. 

 

특히 RxJS와의 변환 지점을 명확히 관리해 보세요!"