08 구조 디렉티브(Structural Directive) 02

NgIf 사례 연구

NgIf는 가장 단순한 구조 디렉티브이며 이해하기 쉽습니다. 부울 표현식을 사용하여 해당 DOM의 전체를 표시하거나 사라지게 합니다.

src/app/app.component.html (ngif-true)

<p *ngIf="true">   Expression is true and ngIf is true.   This paragraph is in the DOM. </p> <p *ngIf="false">   Expression is false and ngIf is false.   This paragraph is not in the DOM. </p>

ngIf 디렉티브는 CSS로 엘리먼트를 숨기지 않습니다. DOM에서 물리적으로 추가 및 제거합니다. 브라우저 개발자 도구를 사용하여 DOM을 검사하여 사실을 확인하십시오.

맨 위 단락은 DOM에 있습니다. 바닥, 사용하지 않은 단락은 그렇지 않습니다. 그 자리에 "bindings"에 대한 주석이 있습니다 (자세한 내용은 나중에 설명합니다).

조건이 false이면 NgIf는 DOM에서 호스트 엘리먼트를 제거하고 DOM 이벤트에서 호스트 엘리먼트를 분리하고 컴포넌트를 Angular 변경 감지에서 분리하여 파괴합니다. 컴포넌트 및 DOM 노드는 가비지 수집되고 메모리를 확보 할 수 있습니다.

 

왜 숨기기보다 제거합니까?

디렉티브는 display 스타일을 none으로 설정하여 불필요한 단락을 숨길 수 있습니다.

src/app/app.component.html (display-none)

<p [style.display]="'block'">   Expression sets display to "block".   This paragraph is visible. </p> <p [style.display]="'none'">   Expression sets display to "none".   This paragraph is hidden but still in the DOM. </p>

보이지 않지만 엘리먼트는 DOM에 남아 있습니다.

숨기기와 제거의 차이점은 간단한 단락에는 중요하지 않습니다. 호스트 엘리먼트가 자원 집약적 인 컴포넌트에 연결될 때 중요합니다. 이러한 컴포넌트의 동작은 숨겨진 경우에도 계속됩니다. 컴포넌트는 DOM 엘리먼트에 연결되어 있습니다. 그러면서 계속 이벤트를 듣습니다. Angular는 데이터 바인딩에 영향을 줄 수있는 변경 사항을 계속 확인합니다. 컴포넌트가 무엇을 하던간에 계속 유지됩니다.

보이지 않지만 모든 자식을 포함한 컴포넌트는 리소스를 묶습니다. 성능과 메모리 부담이 상당 할 수 있고 응답 성이 저하 될 수 있으며 사용자는 아무것도 볼 수 없습니다.

긍정적인 측면에서 엘리먼트를 다시 보여주는 것이 빠릅니다. 컴포넌트의 이전 상태는 보존되어 표시 준비가 끝난 상태입니다. 컴포넌트가 다시 초기화되지 않아 비쌀 수 있습니다. 숨기기와 보여주기가 때로는 좋을 수 있습니다.

그러나 그들을 유지해야하는 강력한 이유가 없으면 NgIf와 같은 구조 디렉티브를 사용하여 사용자가 볼 수없고 사용되지 않는 리소스를 복구 할 수없는 DOM 요소를 제거해야합니다.

이러한 동일한 고려 사항은 내장형이든 관례든 모든 구조 디렉티브에 적용됩니다. 구조 디렉티브를 적용하기 전에 잠시 동안 엘리먼트 추가/제거 및 커모넌트 생성/파기의 결과를 고려해야 할 수 있습니다.

 

별표 (*) 접두사

반드시 디렉티브 이름에 별표(*)가 붙은 것을 보았고 그것이 필요한 이유와 그것이 무엇인지 궁금해 했습니다.

다음은 hero가 존재하면 영웅의 이름을 표시하는 *ngIf입니다..

src/app/app.component.html (asterisk)

<div *ngIf="hero" >{{hero.name}}</div>

별표는 조금 더 복잡함을 대신하는 "syntactic sugar"입니다. Angular는 내부적으로 두 단계로 변환합니다. 먼저 *ngIf = "..."를 템플릿 어트리뷰트인 template = "ngIf ..."로 변환합니다.

src/app/app.component.html (ngif-template-attr)

<div template="ngIf hero">{{hero.name}}</div>

그런 다음 템플릿 어트리뷰트를 <ng-template> 엘리먼트로 변환합니다. 이 엘리먼트는 다음과 같이 호스트 엘리먼트를 감싸줍니다.

src/app/app.component.html (ngif-template)

<ng-template [ngIf]="hero">   <div>{{hero.name}}</div> </ng-template>

l  ngIf 디렉티브는 <ng-template> 엘리먼트로 이동하여 어트리뷰트 바인딩 [ngIf]가 되었습니다.

l  클래스 어트리뷰트를 포함한 나머지 <div>는 <ng-template> 엘리먼트 내부로 이동했습니다.

이러한 양식은 실제로 표시되지 않습니다. 완성 된 제품 만 DOM에서 끝납니다.

Angular는 실제 표시 과정에서 <ng-template> 내용을 사용하고 <ng-template>을 진단 주석으로 대체했습니다.

NgFor 및 NgSwitch ... 디렉티브는 동일한 패턴을 따릅니다.