Angular 20 컨트롤 흐름: `@switch` 도입

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Angular 20 프레임워크 사용자
• 중급 이상의 Angular 개발자 (신규 기능 활용 및 성능 최적화 필요)
• 조건 분기 구현에 관심 있는 개발자 (복잡한 UI 상태 관리 요구)

핵심 요약

• @switch 디렉티브는 JavaScript의 switch 문과 유사한 방식으로 조건에 따라 여러 블록 중 하나를 렌더링할 수 있음
• signal 상태 관리와 결합하여 동적 UI 업데이트를 간결하게 구현 가능
• @switch는 === 연산자 기반의 엄격한 동등 비교를 사용하여 조건 판단

섹션별 세부 요약

1. `@switch` 기능 개요

• Angular 20의 새로운 컨트롤 흐름 기능으로, @if, @for과 함께 3대 핵심 디렉티브 완성
• 단일 표현식의 결과에 따라 여러 조건 블록 중 하나를 선택적으로 렌더링
• 코드 가독성 향상 (JavaScript의 switch 문과 유사한 구조)

2. `StatusComponent` 예제 구현

• @switch를 사용한 상태 관리 예제

```ts

status = signal<'Init' | 'Loading' | 'Completed' | ''>(''); // 초기 상태 빈 문자열

requestChange(value: string) {

this.status.set(value);

}

```

• 버튼 클릭 시 상태 변경 -> @case 조건에 맞는 UI 렌더링
• 기본값(@default)은 상태가 없을 때 표시

3. 비교 방식 및 주의사항

• @switch는 === 엄격한 동등 비교 사용 (타입 변환 없음)
• 중복 조건 처리 시 성능 최적화 (불필요한 조건 블록 제거)

결론

• 복잡한 조건 분기 구현 시 @switch를 사용하여 코드 가독성과 유지보수성을 향상
• signal과 결합하여 반응형 상태 관리를 간결하게 구현
• === 비교 방식을 고려하여 예상치 못한 동작 방지 (예: null/undefined 처리)