ng-container / Angular (2)

ng-container의 활용법

 

중첩 조건부 렌더링

복잡한 조건 로직은 Angular 템플릿에서 흔히 발생합니다.

ng-container를 사용하면 이러한 조건을 깔끔하게 처리할 수 있습니다.

 

<ng-container *ngIf="isLoggedIn">
  <ng-container *ngIf="isAdmin">
    <p>관리자 권한이 있습니다.</p>
  </ng-container>
  <ng-container *ngIf="!isAdmin">
    <p>일반 사용자 권한이 있습니다.</p>
  </ng-container>
</ng-container>

설명

• 로그인 상태에 따라 내부 조건이 결정됩니다.
• 중첩 구조에서도 불필요한 DOM 요소를 방지합니다.

---

동적 콘텐츠 렌더링

동적으로 바뀌는 UI 구성 요소를 효율적으로 관리할 수 있습니다.

<ng-container *ngIf="contentType === 'text'">
  <p>텍스트 콘텐츠가 표시됩니다.</p>
</ng-container>
<ng-container *ngIf="contentType === 'image'">
  <img src="image.jpg" alt="이미지 콘텐츠">
</ng-container>
<ng-container *ngIf="contentType === 'video'">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</ng-container>

 

export class AppComponent {
  contentType: string = 'text'; // text, image, video 중 하나
}

contentType 값에 따라 적절한 콘텐츠가 표시됩니다.

 

---

구조적 지시자 결합

ng-container는 여러 구조적 지시자를 결합하여 복잡한 조건과 반복을 함께 처리할 수 있습니다.

<ng-container *ngFor="let item of items">
  <ng-container *ngIf="item.isActive">
    <p>{{ item.name }} (활성)</p>
  </ng-container>
</ng-container>

 

export class AppComponent {
  items = [
    { name: 'Item 1', isActive: true },
    { name: 'Item 2', isActive: false },
    { name: 'Item 3', isActive: true },
  ];
}



// 출력 결과
Item 1 (활성)  
Item 3 (활성)

 

 

---

실무 팁

템플릿 가독성 향상

복잡한 템플릿에서는 ng-container를 사용하여 UI 로직을 명확하게 분리할 수 있습니다.

잘못된 예제

<div *ngIf="isLoggedIn">
  <div *ngIf="hasNotifications">
    <p>새로운 알림이 있습니다!</p>
  </div>
</div>


개선된 예제

<ng-container *ngIf="isLoggedIn">
  <ng-container *ngIf="hasNotifications">
    <p>새로운 알림이 있습니다!</p>
  </ng-container>
</ng-container>

 

템플릿 구조가 더 간결해지고, 시각적으로 가독성이 높아집니다.

 

성능 최적화

ng-container는 DOM 요소를 생성하지 않으므로 렌더링 성능에 긍정적인 영향을 미칩니다.

실무 사례

다양한 데이터가 반복 렌더링되는 상황에서 ng-container를 사용하면 DOM 노드의 깊이를 줄여 브라우저의 렌더링 비용을 줄일 수 있습니다.