@switch를 사용한 분기
@switch와 @case로 템플릿을 선택합니다.
@switch를 사용한 분기은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
switch로 전환하기
at-switch 블록은 switch 문처럼 값에 따라 여러 분기 중 하나를 선택합니다. at-case 및 at-default와 함께 사용합니다.
기본 switch 구문
괄호 안에 표현식을 넣은 at-switch를 작성한 다음, 각각 일치하는 값을 지정한 하나 이상의 at-case 블록을 작성합니다.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }case 블록
각 at-case에는 괄호 안에 값이 들어갑니다. 값이 switch 표현식과 엄격하게 같은 첫 번째 case가 렌더링됩니다.
default 블록
at-default 블록은 일치하는 case가 없을 때 렌더링됩니다. 선택 사항이지만 완전성을 위해 사용하는 것이 좋습니다.
엄격한 동등성
일치 여부는 엄격한 동등성(===)을 사용해 판단합니다. case 값의 형식이 switch 표현식과 같은지 확인하세요.
시그널로 전환하기
switch 표현식에는 시그널 호출을 사용할 수 있으므로 시그널이 변경되면 뷰가 업데이트됩니다.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }ngSwitch 대체하기
기존의 ngSwitch, 별표 ngSwitchCase 및 별표 ngSwitchDefault 지시문 조합을 더 깔끔한 구문과 가져오기 없이 사용할 수 있는 방식으로 대체합니다.
하나의 분기만 렌더링됨
at-switch는 일치하는 분기 또는 기본 분기를 정확히 하나만 렌더링합니다. 다른 분기는 DOM에 전혀 존재하지 않습니다.
열거형과 상수
case에서는 구성 요소에 노출된 열거형 멤버나 상수와 비교할 수 있어 가독성과 형식 안정성이 향상됩니다.
switch 내부 중첩
각 case 블록에는 at-if 및 at-for와 같은 다른 제어 흐름 블록을 포함해 모든 템플릿 콘텐츠를 넣을 수 있습니다.
switch를 사용할 때
하나의 값에 대해 여러 개의 개별적인 case로 분기할 때는 긴 at-if / at-else if 연결보다 at-switch를 사용하는 것이 좋습니다.
빠른 확인: switch
switch 블록의 대체 분기를 확인합니다.
복습: 전환
엄격한 동등성으로 일치시키는 at-case 분기와 선택적인 at-default 대체 분기가 포함된 at-switch 블록을 배웠습니다. ngSwitch를 대체하며 정확히 하나의 분기만 렌더링합니다. 다음 주제: at-defer로 지연 로딩하기
자주 묻는 질문
“@switch를 사용한 분기” 강의는 무료인가요?
네 — “@switch를 사용한 분기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@switch를 사용한 분기”에서 뭘 배우나요?
@switch와 @case로 템플릿을 선택합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“@switch를 사용한 분기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @if를 사용한 조건부 렌더링
- @for를 사용한 반복
- @switch를 사용한 분기
- @defer를 사용한 지연 로딩