[Angular] Async Pipe

공식문서에서 Async Pipe에 대해 어떻게 설명하는가? (공식문서)

 

①The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. ②When a new value is emitted, the async pipe marks the component to be checked for changes. ③When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks. ④When the reference of the expression changes, the async pipe automatically unsubscribes from the old Observable or Promise and subscribes to the new one.

 

①, ②, ③, ④가 어떤 의미인지 자세히 살펴보자.

 

①The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

Async Pipe는 Observable 또는 Promise를 구독하고, 제일 최신 발행물을 반환한다. 즉, 비동기로 실행되는 코드의 결과 값을 가져온다는 의미이다. (여기서 "구독"이라는 표현을 쓴 것은 Async Pipe가 Promise 뿐만 아니라 Observable에 대해서도 대응하기 때문이다.)Async Pipe은 템플릿에서 "{{ obj_expression | async }}"와 같이 쓸 수 있다. 여기서 obj_expression은 Observable 또는 Promise 를 담고있는 멤버변수일 것이다. 그리고 이 멤버변수는 비동기로 실행되어 반환되는 결과값을 바인딩해준다.

 

②When a new value is emitted, the async pipe marks the component to be checked for changes.

새 값이 발행(반환)되면 Async Pipe는 변경사항을 확인할 컴포넌트를 표시한다. 이 말은 아무래도 Angular가 비동기적인 코드로인해 UI가 재구성(리렌더링)될때, 이전(previous)데이터와 현재(current) 데이터를 비교한다라는 말 같다. 즉, 효과적으로 렌더링하기 위해 Angular는 비동기적으로 변하게될 대상을 Async Pipe로써 표시한다라는 의미같다.

React에서도 reconciliation(재조정)단계에서 key 프로퍼티를 활용함으로써 이전 데이터와 현재 데이터를 비교해 리렌더링할지의 여부를 파악하는 것과 같은 의미인 것 같다. UI를 재구성할때 전체를 재구성하는 것 보다 바뀐 부분만 재구성하는 것이 리렌더링하고 재연산하는 과정에 있어서도 보다 효율적이기 때문일 것이다.

※ 참고링크 : https://ggodong.tistory.com/285 

 

③When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Angular는 React와 같이 life-cycle이 있다. 컴포넌트가 destroy 되었을 때, Async Pipe는 구독을 자동으로 취소해 메모리 누수를 방지한다.

Observable은 subscribe와 unsubscribe가 있다. unsubscribe을 해줘야 메모리의 낭비를 방지해주기 때문에 구독을 취소(더이상 사용되지 않을 때)해 메모리를 확보해 성능을 향상시키는 것이다.

 

④When the reference of the expression changes, the async pipe automatically unsubscribes from the old Observable or Promise and subscribes to the new one.

Async Pipe가 가르키는 대상이 바뀔 때 자동적으로 이전(previous) Observable 또는 Promise를 구독해지하고 새로 반환된 Observable 또는 Promise를 구독한다.

③번과 같은 맥락이다. 성능 향상과 편리함. 컴포넌트 내부에서 subscribe, unsubscribe 코드를 따로 작성하지 않아도 된다라는 의미에서 편리하다는 말이다.