Angular 18 — Signal 기반 반응성과 새로운 제어 흐름

Signal 기반 상태

import { Component, signal, computed, effect } from "@angular/core";

@Component({
  template: `
    @if (isLoggedIn()) {
      <h1>Welcome, {{ name() }}</h1>
    } @else {
      <button (click)="login()">로그인</button>
    }
  `
})
export class AppComponent {
  name = signal("Kim");
  isLoggedIn = signal(false);
  greeting = computed(() => `Hello, ${this.name()}`);

  constructor() {
    effect(() => console.log(this.greeting()));
  }
}

새로운 제어 흐름

@if, @for, @switch로 *ngIf, *ngFor를 대체합니다.