Angular에서 ng-container 요소를 사용하는 방법

소개

ng-container는 Angular 2+에서 사용할 수 있는 요소로 구조 지시문에 대한 호스트 역할을 할 수 있습니다.

이 문서에서는 ng-container로 해결할 수 있는 시나리오를 살펴봅니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

DOM 구조에 익숙합니다. 자세히 알아보려면 튜토리얼 시리즈 DOM 이해하기를 확인하세요.
Angular 구조 지시문에 대한 지식도 도움이 될 수 있습니다.

ng-container를 사용하여 중복 요소 방지

Angular에서는 요소에 하나 이상의 템플릿 바인딩을 사용할 수 없습니다.

*ngIf 및 *ngFor 구조 지시문을 결합한 이 예제는 컴파일되지 않습니다.

Invalid Example<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

이 코드를 컴파일하려고 하면 다음 오류가 발생합니다.

Invalid Example OutputCan't have multiple template bindings on one element. Use only one attribute prefixed with *

한 가지 해결 방법은 템플릿 바인딩을 분리하고 래퍼를 만드는 것입니다.

Valid Example<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

한 가지 단점은 이 접근 방식이 DOM에 중복 div 요소를 도입한다는 것입니다.

Valid Example Output<div>
  <div>
    Todo Content 1
  </div>
  <div>
    Todo Content 2
  </div>
  <div>
    Todo Content 3
  </div>
</div>

여기서 ng-container 요소가 유용해집니다.

다음은 정확히 동일하게 작동하지만 런타임 시 DOM에 추가 요소를 추가하지 않습니다.

Improved Valid Example<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

그러면 다음과 같은 마크업이 생성됩니다.

Improved Example Output<div>
  Todo Content 1
</div>
<div>
  Todo Content 2
</div>
<div>
  Todo Content 3
</div>

ng-container는 ngIf가 인라인 콘텐츠에 사용되는 상황에서도 유용합니다.

Example<div>
  <span *ngIf="error">Oops:</span> {{ message }}
</div>

error가 true이면 다음과 같은 마크업이 생성됩니다.

Example Output<div>
  <span>Oops:</span> An error occurred.
</div>

span 요소를 ng-container로 교체하면 DOM에 추가된 중복 span 요소가 줄어듭니다.

Improved Example<div>
  <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
</div>

error가 true이면 다음과 같은 마크업이 생성됩니다.

Improved Example Output<div>
  Oops: An error occurred.
</div>

응용 프로그램에서 마크업의 양을 줄이면 궁극적으로 DOM 트리가 더 작아지고 Cascading Style Sheet 선택기의 부작용을 피하는 데 도움이 될 수 있습니다.

ng-container를 사용하여 유효한 HTML 표준 보장

ng-container는 div 또는 span을 사용하는 것이 유효한 HTML이 아닌 상황에서 잘못된 HTML 마크업 문제를 해결할 수도 있습니다.

다음 예제는 li 요소가 ul 요소의 직계 자식일 것으로 예상되기 때문에 유효하지 않은 HTML을 생성합니다.

Invalid Example<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

div를 ng-container로 바꾸면 이 문제가 해결됩니다.

Valid Example<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>

유효한 HTML을 사용하면 더 엄격한 테스트 및 요구 사항을 충족하고 브라우저 및 장치에서 지원을 보장할 수 있습니다.

결론

이 기사에서는 중복 요소 및 유효하지 않은 HTML 표준과 같이 ng-container가 Angular 애플리케이션에서 해결하는 문제를 살펴보았습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하세요.