Angular 20 - *ngIf, *ngFor, *ngSwitch Deprecation

 

Angular 20이 릴리즈되면서 가장 눈에 띄는 변화 중 하나는 바로 우리가 익숙하게 사용하던 *ngIf, *ngFor, *ngSwitch 구조 지시자(directive)의 Deprecated 처리입니다.

 

앞으로 Angular는 @for, @if, @switch라는 새로운 템플릿 제어 구조를 기본 문법으로 채택하게 됩니다.

 

 

왜 deprecated 되었을까?

기존 *ngIf, *ngFor 문법은 Angular 템플릿 문법을 잘 모르는 사용자에게 꽤 헷갈리는 문법이었습니다.

• * 별표가 의미하는 바가 명확하지 않음
• 템플릿 구문이 마치 DSL처럼 보여 학습 곡선 증가
• ng-template으로 변환되는 방식은 암묵적이라 템플릿 내부 로직을 이해하기 어려움
• TypeScript에서 사용하는 구조(for...of, if...else)와 괴리감이 있음

이에 따라 Angular 팀은 더 직관적인 템플릿 제어 구조를 도입하기로 했고, 그게 바로 @ 문법입니다.

 

 

---

 

새 문법 소개: @if, @for, @switch

 

기존 *ngIf → @if

<!-- 기존 -->
<div *ngIf="user.isAdmin; else notAdmin">관리자입니다</div>
<ng-template #notAdmin>일반 사용자입니다</ng-template>

<!-- 새로운 문법 -->
@if (user.isAdmin) {
  <div>관리자입니다</div>
} @else {
  <div>일반 사용자입니다</div>
}

 

 

---

 

기존 *ngFor → @for

<!-- 기존 -->
<li *ngFor="let item of items; let i = index">
  {{ i }} - {{ item }}
</li>

<!-- 새로운 문법 -->
@for (item of items; track item.id) {
  <li>{{ $index }} - {{ item.name }}</li>
}

• track item.id는 trackBy: trackByFn 대체입니다.
• $index, $first, $last, $count 등은 새로운 컨텍스트 변수

 

---

 

기존 *ngSwitch → @switch

<!-- 기존 -->
<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">로딩 중...</p>
  <p *ngSwitchCase="'error'">에러 발생</p>
  <p *ngSwitchDefault>완료</p>
</div>

<!-- 새로운 문법 -->
@switch (status) {
  @case ('loading') {
    <p>로딩 중...</p>
  }
  @case ('error') {
    <p>에러 발생</p>
  }
  @default {
    <p>완료</p>
  }
}

 

 

 

---

 

 

예제: 동적 리스트 + 조건 분기

 

사용자 리스트를 출력, 아래 조건을 만족하도록 합니다.

• 사용자 수가 0명일 경우 "사용자가 없습니다" 출력
• 사용자 수가 1명 이상이면 리스트 출력
• 리스트의 마지막 항목에는 "(마지막)" 텍스트 표시
• 각 사용자는 role에 따라 배경색이 다르게 지정됨

@if (users.length === 0) {
  <div class="empty">사용자가 없습니다.</div>
} @else {
  <ul class="user-list">
    @for (user of users; track user.id) {
      <li
        class="user-item"
        [ngClass]="{
          'admin': user.role === 'admin',
          'member': user.role === 'member'
        }"
      >
        <strong>{{ user.name }}</strong>
        <span *ngIf="$last">(마지막)</span>
      </li>
    }
  </ul>
}

 

TypeScript 컴포넌트 예시

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [NgIf, NgFor, NgClass],
  templateUrl: './user-list.component.html',
})
export class UserListComponent {
  users = [
    { id: 1, name: '홍길동', role: 'admin' },
    { id: 2, name: '김개발', role: 'member' },
    { id: 3, name: '이디자이너', role: 'member' },
  ];
}