AsyncSubject in RxJS: 최종 값을 전달하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 및 RxJS를 활용한 웹 개발자, 특히 비동기 처리와 최종 결과 처리에 관심이 있는 중급 이상 개발자

핵심 요약

• AsyncSubject는 .complete() 호출 시 마지막 값만 구독자에게 전달하며, 이전 값은 무시된다.
• next()와 complete() 메서드를 오버라이드하여 마지막 값을 저장하고 완료 시 전달하는 방식으로 동작한다.
• 최종 결과만 필요하거나 Promise처럼 동작하는 Observable이 필요한 경우에 최적화되어 있다.

섹션별 세부 요약

1. AsyncSubject의 기본 동작

• AsyncSubject는 초기값이 없으며, .next()로 전달된 값은 완료 시점에만 구독자에게 전달된다.
• 중간 값은 무시되고, 마지막 값만 보존되어 완료 시 전달된다.
• 구독 시점이 완료 후인 경우, 이미 전달된 마지막 값을 즉시 받는다.

2. Angular에서의 예시 코드

• textarea 입력값을 AsyncSubject에 전달하고, async 파이프를 통해 구독한다.
• addAsyncSubject()와 sendAsyncSubject() 메서드로 값 추가 및 전달, completeAsyncSubject()로 완료 처리.
• signal과 model을 사용하여 상태 관리 및 데이터 전달.

3. 내부 구현 방식

• AsyncSubject는 Subject를 상속받고 next()와 complete() 메서드를 재정의한다.
• next()는 마지막 값을 _value 변수에 저장하고, complete()은 저장된 값을 super.next()로 전달한다.
• 완료 후에는 새로운 값이 추가되지 않으며, 기존 구독자는 마지막 값을 즉시 받는다.

4. 사용 시나리오 및 장점

• 최종 결과만 필요할 때 (예: 비동기 작업 완료 후 결과 처리).
• Promise와 유사한 동작을 Observable로 구현할 때.
• 구독 시점이 언제든 될 수 있는 경우, 마지막 값을 보장하는 데 유리.

결론

• AsyncSubject는 비동기 작업의 최종 결과만 보장해야 하는 경우에 유용하며, .complete() 호출 시점에만 값이 전달된다.
• 구현 시 complete() 메서드 호출을 꼭 수행해야 하며, 완료 후에는 추가 값이 무시된다.
• Angular 앱에서 사용 시 async 파이프와 결합해 실시간 데이터 처리에 효과적.