Blazor 반복 렌더링과 리스트 — @foreach · @for 완전 가이드

📌 학습 목표

📝 개념 설명

1. Blazor의 반복 렌더링이란?

Blazor 컴포넌트에서는 C#의 반복문을 Razor 지시어 형태로 HTML 템플릿 안에 직접 작성할 수 있습니다. @foreach와 @for는 컬렉션을 순회하며 각 항목을 HTML 요소로 렌더링하는 핵심 메커니즘입니다. 일반 C# 코드와 달리, Razor 템플릿 안에서 반복문을 사용할 때는 @ 접두사를 붙여 Blazor 엔진이 C# 구문임을 인식하도록 해야 합니다.

2. @foreach 지시어

@foreach는 컬렉션(List, 배열, IEnumerable 등)의 각 요소를 순서대로 꺼내어 HTML 블록을 반복 생성합니다. 인덱스가 필요 없고 전체 항목을 순회할 때 가장 간결한 방법입니다.

@foreach (var 변수명 in 컬렉션)
{
    <HTML요소>@변수명</HTML요소>
}

3. @for 지시어

@for는 인덱스를 직접 제어해야 할 때 사용합니다. 순번 출력, 홀수 번째 항목 강조 등 인덱스 값이 필요한 경우에 적합합니다.

@for (int i = 0; i < 컬렉션.Count; i++)
{
    <HTML요소>@컬렉션[i]</HTML요소>
}

4. @key 속성 — 렌더링 성능 최적화

Blazor의 가상 DOM 비교(Diffing) 알고리즘은 리스트 항목이 추가·삭제·이동될 때 어떤 항목이 변경되었는지 추적합니다. @key 속성에 고유 식별자(ID 등)를 지정하면 변경 전후 항목을 정확히 매핑하여 불필요한 DOM 재생성을 방지합니다.

@foreach (var item in items)
{
    <div @key='item.Id'>@item.Name</div>
}

5. 빈 컬렉션 처리

컬렉션이 비어 있을 때 아무 내용도 렌더링되지 않으면 사용자 경험이 저하됩니다. @if와 @foreach를 조합하여 빈 상태 메시지를 표시하는 것이 좋은 관행입니다.

@if (items.Count == 0)
{
    <p>표시할 항목이 없습니다.</p>
}
else
{
    @foreach (var item in items)
    {
        <li>@item</li>
    }
}

💡 예제 & 실습

예제 1. @foreach로 문자열 리스트 출력

가장 기본적인 형태로, List<string>을 <ul> 목록으로 렌더링합니다.

@page "/fruits"

<h3>과일 목록</h3>
<ul>
    @foreach (var fruit in fruits)
    {
        <li>@fruit</li>
    }
</ul>

@code {
    private List<string> fruits = new()
    {
        "사과", "바나나", "오렌지", "포도"
    };
}

렌더링 결과: 사과 / 바나나 / 오렌지 / 포도 항목이 순서대로 <li>로 출력됩니다.

예제 2. @for로 순번과 함께 출력

인덱스 i를 활용해 순번을 함께 표시합니다.

@page "/ranking"

<h3>인기 프로그래밍 언어 순위</h3>
<ol>
    @for (int i = 0; i < languages.Count; i++)
    {
        <li><strong>@(i + 1)위</strong> — @languages[i]</li>
    }
</ol>

@code {
    private List<string> languages = new()
    {
        "C#", "Python", "JavaScript", "Java"
    };
}

@(i + 1)처럼 괄호로 감싸면 C# 표현식을 직접 계산해 출력할 수 있습니다. 0-based 인덱스를 1-based 순번으로 변환하는 일반적인 패턴입니다.

예제 3. 객체 리스트 + @key 성능 최적화

실무에서는 모델 클래스 컬렉션을 다루는 경우가 많습니다. @key와 빈 컬렉션 처리를 함께 적용합니다.

@page "/products"

<h3>상품 목록</h3>
@if (products.Count == 0)
{
    <p>등록된 상품이 없습니다.</p>
}
else
{
    <ul>
        @foreach (var p in products)
        {
            <li @key='p.Id'>
                <strong>@p.Name</strong> — ₩@p.Price.ToString("N0")
            </li>
        }
    </ul>
}

@code {
    private List<Product> products = new()
    {
        new Product { Id = 1, Name = "노트북", Price = 1200000 },
        new Product { Id = 2, Name = "마우스", Price = 35000 },
        new Product { Id = 3, Name = "키보드", Price = 89000 }
    };

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = "";
        public int Price { get; set; }
    }
}

• <li @key='p.Id'> — 고유 ID로 Blazor Diffing 최적화
• p.Price.ToString("N0") — 숫자를 천 단위 콤마 형식으로 출력
• Name { get; set; } = "" — null 방지 기본값 지정

예제 4. 중첩 @foreach — 카테고리별 리스트

@foreach 안에 또 다른 @foreach를 중첩하여 계층형 데이터를 표현할 수 있습니다.

@page "/menu"

@foreach (var category in menu)
{
    <h4>@category.CategoryName</h4>
    <ul>
        @foreach (var item in category.Items)
        {
            <li>@item</li>
        }
    </ul>
}

@code {
    record MenuCategory(string CategoryName, List<string> Items);

    private List<MenuCategory> menu = new()
    {
        new("한식", new() { "비빔밥", "김치찌개", "불고기" }),
        new("양식", new() { "파스타", "스테이크", "피자" })
    };
}

⚠️ 자주 틀리는 것 / 주의사항

@* ❌ 잘못된 예 — 인덱스 초과 오류 *@
@for (int i = 0; i <= items.Count; i++) { ... }

@* ✅ 올바른 예 *@
@for (int i = 0; i < items.Count; i++) { ... }

@* ❌ 동적 리스트에 @key 없음 *@
@foreach (var item in items)
{
    <div>@item.Name</div>
}

@* ✅ 고유 키 지정 *@
@foreach (var item in items)
{
    <div @key='item.Id'>@item.Name</div>
}

@* ❌ null이면 런타임 오류 *@
private List<string> items;

@* ✅ 빈 리스트로 초기화 *@
private List<string> items = new();

@foreach (var item in items)
{
    var current = item;  // 안전한 로컬 복사
    <button @onclick='() => HandleClick(current)'>@current</button>
}

🎯 마무리

Blazor의 반복 렌더링은 @foreach와 @for 두 지시어를 중심으로 동작합니다. 전체 컬렉션 순회에는 @foreach가 가장 간결하고, 인덱스가 필요한 경우에는 @for를 선택합니다. 동적으로 변경되는 리스트에는 반드시 @key를 지정하여 렌더링 성능을 보호하고, 컬렉션은 항상 new()로 초기화하여 null 오류를 원천 차단하세요.