@for를 사용한 반복
@for와 track 식으로 목록을 렌더링합니다.
@for를 사용한 반복은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
for로 반복하기
at-for 블록은 컬렉션의 각 항목에 대해 콘텐츠를 반복합니다. 기존 별표 ngFor 지시문을 대체하며 track 표현식이 필요합니다.
기본 for 구문
앳 기호와 for라는 단어를 작성한 다음 item of items를 쓰고, 고유 키를 지정하는 필수 track 절을 추가합니다.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }track이 필요한 이유
track 표현식은 변경 전후에 각 항목을 식별하는 방법을 Angular에 알려 줍니다. 따라서 DOM 노드를 다시 만들지 않고 재사용할 수 있어 성능이 크게 향상됩니다.
식별자로 추적하기
항목에 안정적인 id가 없는 경우(예: 기본 문자열 목록) 항목 자체를 기준으로 추적할 수 있습니다.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }empty 블록
at-empty 블록은 컬렉션에 항목이 없을 때 렌더링됩니다. at-for 블록의 닫는 중괄호 뒤에 이어서 작성합니다.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }컨텍스트 변수
at-for 블록 안에서는 index, count, first, last, even 및 odd를 비롯한 유용한 변수를 사용할 수 있습니다. let으로 이러한 변수를 가져옵니다.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }index 변수
$index 값은 현재 항목의 0부터 시작하는 위치를 나타내며, 위에서 본 것처럼 로컬 변수에 별칭을 지정해 사용하는 경우가 많습니다.
first 및 last
$first 및 $last 불리언 값은 첫 번째 항목과 마지막 항목에서 true가 되며, 스타일 지정이나 구분선에 유용합니다.
even 및 odd
$even 및 $odd 불리언 값은 행 스타일을 번갈아 적용할 때 유용합니다.
시그널 반복하기
컬렉션은 시그널에서 가져올 수 있습니다. for 표현식에서 시그널을 호출하기만 하면 됩니다.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }성능 향상
track이 필수이므로 새로운 at-for는 trackBy가 없는 별표 ngFor보다 빠릅니다. Angular가 항목과 DOM 노드를 연결하는 방법을 항상 알고 있기 때문입니다.
빠른 확인: 반복
for 블록의 필수 요소를 확인합니다.
복습: 반복
필수 track 표현식이 포함된 at-for 블록, 비어 있는 컬렉션을 위한 at-empty 블록, 그리고 index, first, last, even 및 odd와 같은 컨텍스트 변수를 배웠습니다. 별표 ngFor를 대체합니다. 다음 주제: at-switch로 전환하기
자주 묻는 질문
“@for를 사용한 반복” 강의는 무료인가요?
네 — “@for를 사용한 반복” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@for를 사용한 반복”에서 뭘 배우나요?
@for와 track 식으로 목록을 렌더링합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“@for를 사용한 반복” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @if를 사용한 조건부 렌더링
- @for를 사용한 반복
- @switch를 사용한 분기
- @defer를 사용한 지연 로딩