Angular 템플릿의 새로운 변수 선언 방식: @let syntax

그동안 Angular 템플릿 내부에서 특정 계산 결과나 Observable의 데이터를 재사용하기 위해 우리는 다소 번거로운 방식을 사용해 왔습니다. Angular 18.1에서 도입된 @let 구문은 이러한 불편함을 해소하고 템플릿 내 변수 선언을 공식적으로 지원합니다.

1. 기존 방식의 한계 (Before)

과거에는 템플릿 내에서 변수를 로컬화하기 위해 주로 *ngIf나 *ngFor의 as 문법을 활용하는 '트릭'을 사용했습니다.

<div *ngIf="user$ | async as user">
  {{ user.name }}
  @let status = user.active ? '온라인' : '오프라인'; </div>

이 방식은 단순히 변수를 저장하고 싶을 때도 불필요하게 DOM 요소를 감싸거나, 데이터가 falsy일 경우 렌더링 자체가 되지 않는 부작용이 있었습니다.

2. @let 도입 (After)

이제는 별도의 디렉티브 없이도 @let 키워드를 통해 직접 변수를 선언하고 사용할 수 있습니다.

import { Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { of } from 'rxjs';

@Component({
  selector: 'app-let-example',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    @let user = user$ | async;
    @let isAdmin = user?.role === 'admin';

    @if (user) {
      <section>
        <h1>반갑습니다, {{ user.name }}님</h1>
        <p>권한: {{ isAdmin ? '관리자' : '일반 유저' }}</p>
        
        @let statusText = user.active ? '현재 접속 중' : '부재 중';
        <span>상태: {{ statusText }}</span>
      </section>
    }
  `
})
export class LetExampleComponent {
  user$ = of({ name: 'Adam Kim', role: 'admin', active: true });
}

3. 주요 특징 및 제약 사항

• 동적 업데이트: 선언된 변수는 읽기 전용(readonly)이지만, 입력값이나 async 파이프의 값이 변경되면 자동으로 재계산됩니다.
• 스코프 제한: 변수는 선언된 뷰와 그 하위 요소에서만 유효하며, 블록 외부로 호이스팅(Hoisting)되지 않습니다.
• 유효성: @let은 @if, @for와 같은 새로운 Control Flow와 완벽하게 호환됩니다.

Refernece

introducing-let-in-angular
variables