Angular의 RxJS 선언적 패턴

RxJS는 코드를 선언적으로 만들지 않습니다.

1단계: 서비스 생성

URL에서 오는 데이터는

• 파이프를 통과함
• 은 RxJS tap operator을 통과했습니다.
  
• todo$에 저장됨

하지만 이것만 해보면 아무 일도 일어나지 않습니다!

콘솔에 아무 것도 표시되지 않습니다.

2단계: Observable을 지역 변수에 할당

구성요소로 이동해 보겠습니다.

여기서 핵심 라인은 10번째 줄입니다.

data$ = this.todoService.todo$;

data$라는 지역 변수를 정의했습니다. 서비스의 관찰 가능 항목을 변수에 할당하여 구성 요소에서 사용할 수 있도록 합니다.

Angular에게 구독 또는 구독 취소를 지시하는 것이 아닙니다! 우리는 관찰자조차 보고 있지 않습니다! 진정한 선언적 스타일이 빛을 발하는 곳입니다.

결국 템플릿에 일부 데이터만 표시하려고 합니다. 그것이 우리의 목표입니다. Angular가 그것을 달성하는 방법은 우리의 일이 아닙니다.

다시한번 말씀드리지만 이것만 하시면 아무일도 일어나지 않습니다!

템플릿의 콘솔에는 아무 것도 표시되지 않습니다.

우리의 목표가 무엇인지 Angular에 알리지 않았기 때문에 이치에 맞습니다!

3단계: 비동기 파이프와 함께 로컬 변수 사용

템플릿으로 이동해 보겠습니다.

여기에서 Angular에게 수행해야 할 작업을 알려줍니다. 데이터를 사용할 수 있을 때 템플릿에 개체의 제목을 표시합니다.

그렇게 하기 위해 비동기 파이프를 사용합니다.

비동기 파이프는 아래와 같이 자동으로 구독 및 구독 취소합니다.

// app.component.html
<div *ngIf="data$ | async as data">
  {{ data.title }}
</div>

이 접근 방식과 고전적인 명령형 접근 방식 간의 보다 포괄적인 예와 비교는 MediumRxJS Declarative Pattern in Angular에서 볼 수 있습니다.

여러분의 의견을 들려주세요!