@if를 사용한 조건부 렌더링
@if와 @else로 조건에 따라 콘텐츠를 표시합니다.
@if를 사용한 조건부 렌더링은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
내장 제어 흐름
최신 Angular 템플릿에는 앳 기호로 작성하는 내장 제어 흐름 블록이 포함되어 있습니다. 이 블록은 기존 구조 지시문을 대체하며 가져오기가 필요하지 않습니다.
if 블록
at-if 블록은 조건에 따라 콘텐츠를 렌더링합니다. 앳 기호 뒤에 if라는 단어를 쓰고, 괄호 안에 조건을 넣은 다음 중괄호 안에 콘텐츠를 작성합니다.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }ngIf 대체하기
기존 *ngIf 구조 지시문을 대체합니다. 새로운 구문은 템플릿 언어의 일부이므로 가져올 항목이 없습니다.
조건에서 시그널 읽기
조건에는 시그널 호출을 포함한 모든 표현식을 사용할 수 있습니다.
// @if (count() > 0) {
// <p>You have items</p>
// }else 블록
at-else 블록은 조건이 거짓일 때 대체 콘텐츠를 제공합니다. if 블록의 닫는 중괄호 바로 뒤에 이어서 작성합니다.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }else if 연결
at-else if를 사용해 조건을 연결한 다음 마지막에 at-else를 사용할 수 있습니다.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }조건 결과 저장하기
at-if 블록은 as 키워드로 조건 결과를 로컬 변수에 바인딩할 수 있습니다. null이 아닌 값으로 범위를 좁힐 때 유용합니다.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }새 구문을 사용하는 이유
내장 제어 흐름은 구조 지시문보다 읽기 쉽고, 형식 검사를 지원하며, 효율적입니다. 기존 지시문의 마이크로 구문과 별표도 사용하지 않습니다.
컨테이너 요소가 필요하지 않음
기존 방식과 달리 at-if 블록에는 래퍼 요소나 ng-template이 필요하지 않습니다. 중괄호 자체가 조건부 콘텐츠의 범위를 구분합니다.
블록 중첩하기
제어 흐름 블록은 자유롭게 중첩할 수 있습니다. at-if 안에 또 다른 at-if나 at-for 등을 넣을 수 있습니다.
바인딩과 결합하기
at-if 블록 안에서는 완전한 템플릿 언어를 사용할 수 있습니다. 보간, 속성 바인딩 및 이벤트 바인딩이 모두 정상적으로 작동합니다.
빠른 확인: 조건문
새로운 조건부 구문을 확인합니다.
복습: 조건문
조건부 렌더링에 사용하는 at-if 블록과 대안을 위한 at-else 및 at-else if, 결과를 저장하는 as 키워드를 배웠습니다. 별표 ngIf를 대체하며 가져오기가 필요하지 않습니다. 다음 주제: at-for로 반복하기
자주 묻는 질문
“@if를 사용한 조건부 렌더링” 강의는 무료인가요?
네 — “@if를 사용한 조건부 렌더링” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@if를 사용한 조건부 렌더링”에서 뭘 배우나요?
@if와 @else로 조건에 따라 콘텐츠를 표시합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“@if를 사용한 조건부 렌더링” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @if를 사용한 조건부 렌더링
- @for를 사용한 반복
- @switch를 사용한 분기
- @defer를 사용한 지연 로딩