ng-container / Angular (1)

ng-container

ng-container는 Angular 템플릿에서 사용하는 가상 컨테이너로, HTML DOM에 렌더링되지 않는 특징이 있습니다.

이는 불필요한 DOM 요소를 줄이고, 템플릿을 간결하게 유지하는 데 도움을 줍니다.

주요 특징

1. DOM에 렌더링되지 않음
   • HTML 출력에서 추가적인 태그 없이 Angular 지시자를 사용할 수 있습니다.
2. 구조적 지시자와 결합 가능
   • *ngIf, *ngFor 등과 함께 사용할 때 유용합니다.
3. 템플릿 가독성 향상
   • 불필요한 중첩을 줄이고 더 직관적인 코드를 작성할 수 있습니다.

사용 사례

• DOM 구조를 깔끔하게 유지하고 싶을 때
• 복잡한 조건부 렌더링이나 반복 작업이 필요한 경우

---

ng-container와 div의 차이

div를 사용할 경우

<div *ngIf="isLoggedIn">
  <p>환영합니다, {{ userName }}님!</p>
</div>


렌더링 결과


<div>
  <p>환영합니다, 홍길동님!</p>
</div>

 

ng-container를 사용할 경우

<ng-container *ngIf="isLoggedIn">
  <p>환영합니다, {{ userName }}님!</p>
</ng-container>


렌더링 결과


<p>환영합니다, 홍길동님!</p>

 

 

차이점 요약

요소	DOM에 렌더링 여부	사용 목적
div	렌더링 됨	레이아웃 및 스타일링 목적
ng-container	렌더링되지 않음	구조적 지시자 결합 및 코드 간결화

 

---

기본 사용법

조건부 렌더링 (*ngIf)

<ng-container *ngIf="isLoggedIn">
  <p>환영합니다, {{ userName }}님!</p>
</ng-container>

 

TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  isLoggedIn: boolean = true;
  userName: string = '홍길동';
}

 

출력 결과 -> 환영합니다. 홍길동님!

 

 

반복 렌더링 (*ngFor)

ng-container는 반복 렌더링에서도 DOM을 깔끔하게 유지하는 데 유용합니다.

<ng-container *ngFor="let item of items">
  <p>{{ item.name }}</p>
  <p>{{ item.description }}</p>
</ng-container>

 

TypeScript 코드

export class AppComponent {
  items = [
    { name: 'Item 1', description: 'Description 1' },
    { name: 'Item 2', description: 'Description 2' },
  ];
}

 

출력 결과

Item 1  
Description 1  
Item 2  
Description 2

 

 

중첩된 조건부 렌더링

ng-container는 복잡한 조건부 로직을 단순화합니다.

<ng-container *ngIf="isLoggedIn">
  <ng-container *ngIf="hasPermission">
    <p>특정 기능을 사용할 수 있습니다.</p>
  </ng-container>
</ng-container>

설명

• 사용자가 로그인되어 있고, 권한이 있는 경우에만 특정 메시지를 출력합니다.
• 중첩된 조건에서도 불필요한 DOM 태그 생성을 방지합니다.

 

다수의 구조적 지시자 결합

한 번에 여러 조건을 처리할 수 있습니다.

<ng-container *ngIf="isLoggedIn && isSubscribed">
  <p>환영합니다, 구독자님!</p>
</ng-container>

 

---

주의할 점

지나친 사용

ng-container는 DOM을 간소화하지만, 과도한 사용은 오히려 템플릿 가독성을 저하시킬 수 있습니다.

잘못된 예제

<ng-container>
  <ng-container>
    <p>너무 깊게 중첩된 ng-container!</p>
  </ng-container>
</ng-container>

적절한 대체 방법

• 간단한 조건에서는 ng-template을 사용하는 것이 더 적합할 수 있습니다.
• 레이아웃 및 스타일링 목적이라면 div 또는 다른 HTML 요소 사용을 하는것이 좋습니다.