Angular의 host view, embedded view 그리고 ViewContainerRef

Angular는 3가지의 View가 있습니다. 이들에 대해 살펴보고 VIewContainerRef를 통해 동적으로 View를 추가 및 삭제하는 법을 정리하겠습니다.

VIewContainerRef

angular.io 사이트에서 VIewContainerRef를 살펴보면 아래와 같습니다.

이 중, createEmbeddedView와 createComponent는 view를 생성하는 메소드로서 createEmbeddedView 메소드로 생성된 view를 Embedded view 라고 하며 template 기반이며, 반대로 createComponent 메소드로 생성된 view를 Host view 라고 부르며 Component 기반입니다.

위 두 메소드들을 통해 Component View(DOM)에 동적으로 view를 추가할 수 있습니다.

createEmbeddedView

이 메소드를 통해 Embedded view를 생성하기 위해, html 코드에서 ng-template이 필요합니다. <ng-template> 에서 view를 가지고 있고, VIewContainerRef의 메소드 createEmbeddedView 호출을 통해 view를 동적으로 추가합니다.

위 코드의 결과입니다.

createComponent

이 메소드를 통해 host view를 만들기 위해 component factory를 사용합니다. 또한 view로 보여줄 component가 정의되어야 합니다(HelloComponent)

위 코드의 결과입니다.

여기까지 읽었다면, VIewContainerRef의 두 메소드를 통해 view를 생성할 수 있단 걸 알았습니다. 그렇다면.

View는 왜 사용할까?

View는 동적으로 재사용할 view가 있을 경우 유용하게 사용할 수 있습니다. 스크롤을 올리지 않게 다시 VIewContainerRef를 살펴 보겠습니다.

노란색으로 표시한 부분 중 clear와 remove 메소드는 view를 완전히 지워버립니다. 그리고 다시 view를 보여주려면 처음부터 다시 만드는 반면에 detach 메소드를 사용하면 DOM에서만 제거하고 해당 view는 제거되지 않습니다. 만약 view를 다시 보여줘야 할 경우, insert 메소드를 통해 처음부터 만들지 않고 바로 화면에 보여줄 수 있으므로 성능과 재 사용 측면에 장점이 있습니다.

Host View와 Embedded View의 차이

Host View를 상기해보면 view에 대한 component class가 존재합니다. 따라서 만들어 제공하려는 view의 로직이 크고 다양한 변화가 필요할 때 적합합니다. 반대로 Embedded view는 view에 대응되는 component class 대신, ng-template의 템플릿 참조 변수로 view를 참조하고 있다가, 메소드 호출을 통해 동적으로 view를 추가합니다. 따라서 로직이 크지 않을 때 사용하는게 적합합니다.

*ngIf와 createEmbeddedView

createEmbeddedView를 상기해보면 <ng-template>의 템플릿 참조 변수로 view를 참조하고 있다가 메소드가 호출되면 view를 보여주는 방식입니다. 마치 ngIf의 조건이 true가 되면 DOM에 화면이 추가되듯이 말이죠. 사실 *ngIf 구조 디렉티브는 내부적으로 createEmbeddedView 메소드를 사용합니다.

@Directive({selector: '[ngIf]'})
export class NgIf {
    private _updateView() {
       ...
       if (this._thenTemplateRef) {
           this._thenViewRef =
            this._viewContainer.createEmbeddedView(this._thenTemplateRef, this._context);

간단 요약

1. Angular의 view는 크게 Component view, Host view, Embedded view 가 있다.
2. VIewContainerRef의 createEmbeddedView와 createComponent 메소드를 통해 view를 생성할 수 있다.
3. view는 동적으로 재 사용이 가능한 장점이 있으며 상황에 맞게 Host view를 쓸지 Embedded view를 쓸지 사용하면 된다.