Blazor 비동기 프로그래밍 — async/await와 OnInitializedAsync

📌 학습 목표

📝 개념 설명

1. 왜 비동기 프로그래밍이 필요한가?

웹 애플리케이션은 데이터베이스 조회, 외부 API 호출, 파일 읽기 등 시간이 걸리는 작업을 빈번하게 수행합니다. 이 작업들을 동기(Synchronous) 방식으로 처리하면 작업이 끝날 때까지 브라우저 UI 전체가 멈춥니다. 사용자는 화면이 얼어붙은 것처럼 느끼게 됩니다.

비동기(Asynchronous) 방식을 사용하면 시간이 걸리는 작업을 기다리는 동안 UI 스레드가 다른 작업(화면 렌더링, 사용자 입력 처리 등)을 계속 수행할 수 있습니다. 결과적으로 응답성 좋은 UI를 만들 수 있습니다.

2. async/await 패턴 기본 원리

C#에서 비동기 메서드는 async 키워드로 선언하고, 시간이 걸리는 작업 앞에 await 키워드를 붙입니다.

• async: 이 메서드는 비동기 작업을 포함한다고 컴파일러에게 알립니다.
• await: 해당 비동기 작업이 완료될 때까지 이 지점에서 실행을 일시 중단하되, 스레드는 해제하여 다른 작업을 처리할 수 있게 합니다.
• Task: 비동기 작업의 결과를 나타내는 객체입니다. 반환값이 없으면 Task, 있으면 Task<T>를 사용합니다.

// 동기 메서드
string GetUserName(int id)
{
    return database.FindUser(id).Name; // 완료될 때까지 블로킹
}

// 비동기 메서드
async Task<string> GetUserNameAsync(int id)
{
    var user = await database.FindUserAsync(id); // 완료될 때까지 대기하되 스레드 해제
    return user.Name;
}

3. Blazor의 수명 주기 메서드와 비동기

Blazor 컴포넌트는 여러 수명 주기(Lifecycle) 메서드를 제공합니다. 이 중 데이터를 초기 로딩할 때 사용하는 핵심 메서드가 OnInitializedAsync입니다.

Blazor는 OnInitializedAsync를 특별하게 처리합니다. 이 메서드가 실행되면 두 번의 렌더링이 발생합니다.

1. 첫 번째 렌더링: await를 만나는 순간 즉시 렌더링 (로딩 상태 표시)
2. 두 번째 렌더링: 비동기 작업 완료 후 자동 재렌더링 (실제 데이터 표시)

💡 예제 & 실습

예제 1 — 기본 비동기 데이터 로딩

가장 기본적인 형태입니다. 컴포넌트가 초기화될 때 데이터를 비동기로 가져와 표시합니다.

@page "/users"
@inject HttpClient Http

<h2>사용자 목록</h2>

@if (users == null)
{
    <p>데이터를 불러오는 중...</p>
}
else
{
    <ul>
        @foreach (var user in users)
        {
            <li>@user.Name (@user.Email)</li>
        }
    </ul>
}

@code {
    private List<User>? users;

    protected override async Task OnInitializedAsync()
    {
        // await를 만나는 순간 첫 번째 렌더링 발생 (users == null → 로딩 메시지 표시)
        users = await Http.GetFromJsonAsync<List<User>>("api/users");
        // 이 줄 이후 두 번째 렌더링 발생 (users에 데이터 → 목록 표시)
    }

    public class User
    {
        public string Name { get; set; } = string.Empty;
        public string Email { get; set; } = string.Empty;
    }
}

예제 2 — 로딩 스피너와 오류 처리

실전에서는 로딩 중 스피너를 표시하고, 오류가 발생했을 때 사용자에게 알려주는 처리가 필요합니다.

@page "/products"
@inject HttpClient Http

<h2>상품 목록</h2>

@if (isLoading)
{
    <div class="spinner">⏳ 상품을 불러오는 중입니다...</div>
}
else if (errorMessage != null)
{
    <div class="alert alert-danger">
        ❌ 오류 발생: @errorMessage
        <button @onclick="LoadProductsAsync">다시 시도</button>
    </div>
}
else
{
    <ul>
        @foreach (var product in products!)
        {
            <li>@product.Name — @product.Price.ToString("C")</li>
        }
    </ul>
}

@code {
    private List<Product>? products;
    private bool isLoading = false;
    private string? errorMessage;

    protected override async Task OnInitializedAsync()
    {
        await LoadProductsAsync();
    }

    private async Task LoadProductsAsync()
    {
        isLoading = true;
        errorMessage = null;

        try
        {
            products = await Http.GetFromJsonAsync<List<Product>>("api/products");
        }
        catch (HttpRequestException ex)
        {
            errorMessage = $"네트워크 오류: {ex.Message}";
        }
        catch (Exception ex)
        {
            errorMessage = $"알 수 없는 오류: {ex.Message}";
        }
        finally
        {
            isLoading = false;
        }
    }

    public class Product
    {
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
    }
}

위 코드의 핵심 구조를 살펴봅니다.

• isLoading 플래그: 로딩 시작 시 true, 완료 또는 오류 시 false로 설정합니다.
• try/catch/finally: await는 예외를 일반 동기 코드처럼 try/catch로 처리할 수 있습니다. finally는 성공·실패 모두 실행됩니다.
• 재시도 버튼: 로딩 로직을 별도 메서드(LoadProductsAsync)로 분리하면 버튼 클릭으로 재시도할 수 있습니다.

예제 3 — 매개변수 변경에 반응하는 비동기 로딩

URL 매개변수가 바뀔 때마다 새로운 데이터를 로딩해야 하는 경우, OnParametersSetAsync를 사용합니다.

@page "/product/{Id:int}"
@inject HttpClient Http

<h2>상품 상세</h2>

@if (product == null)
{
    <p>로딩 중...</p>
}
else
{
    <h3>@product.Name</h3>
    <p>가격: @product.Price.ToString("C")</p>
    <p>설명: @product.Description</p>
}

@code {
    [Parameter] public int Id { get; set; }

    private Product? product;
    private int previousId = -1;

    protected override async Task OnParametersSetAsync()
    {
        // Id가 실제로 변경된 경우에만 데이터 로딩
        if (Id != previousId)
        {
            previousId = Id;
            product = null; // 이전 데이터 초기화 (로딩 표시)
            product = await Http.GetFromJsonAsync<Product>($"api/products/{Id}");
        }
    }

    public class Product
    {
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public string Description { get; set; } = string.Empty;
    }
}

예제 4 — StateHasChanged()를 수동으로 호출해야 하는 경우

Blazor는 대부분의 경우 자동으로 UI를 갱신합니다. 그러나 외부 이벤트(타이머, 외부 서비스 콜백)에서 상태를 변경하는 경우에는 수동으로 StateHasChanged()를 호출해야 합니다.

@page "/clock"
@implements IDisposable

<h2>현재 시간: @currentTime.ToString("HH:mm:ss")</h2>

@code {
    private DateTime currentTime = DateTime.Now;
    private Timer? timer;

    protected override void OnInitialized()
    {
        // 1초마다 시간 업데이트
        timer = new Timer(async _ =>
        {
            currentTime = DateTime.Now;
            // 타이머 콜백은 Blazor의 렌더링 루프 밖에서 실행되므로
            // InvokeAsync로 UI 스레드에 작업을 전달하고 StateHasChanged 호출
            await InvokeAsync(StateHasChanged);
        }, null, 0, 1000);
    }

    public void Dispose()
    {
        timer?.Dispose(); // 컴포넌트 제거 시 타이머 해제
    }
}

• InvokeAsync: Blazor의 동기화 컨텍스트로 작업을 전달합니다. 외부 스레드에서 UI를 업데이트할 때 반드시 사용합니다.
• StateHasChanged(): Blazor에게 “상태가 변경되었으니 다시 렌더링하라”고 알립니다.
• IDisposable: 타이머나 이벤트 구독 같은 자원은 컴포넌트가 제거될 때 반드시 해제해야 메모리 누수를 방지할 수 있습니다.

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

// ❌ 잘못된 방법
protected override async void OnInitialized() { ... }

// ✅ 올바른 방법
protected override async Task OnInitializedAsync() { ... }

// ❌ 잘못된 방법 — await 빠짐
protected override async Task OnInitializedAsync()
{
    LoadDataAsync(); // await 없음! 데이터가 아직 안 왔는데 메서드가 끝남
}

// ✅ 올바른 방법
protected override async Task OnInitializedAsync()
{
    await LoadDataAsync(); // 완료될 때까지 기다림
}

// ❌ 잘못된 방법 — null 체크 없음
@foreach (var item in items)  // items가 null이면 런타임 오류!
{
    <li>@item.Name</li>
}

// ✅ 올바른 방법 1 — null 조건부 연산자
@foreach (var item in items ?? Enumerable.Empty<Item>())

// ✅ 올바른 방법 2 — if 분기
@if (items != null)
{
    @foreach (var item in items) { ... }
}

// ❌ 잘못된 방법
private HttpClient http = new HttpClient();

// ✅ 올바른 방법 — @inject 또는 [Inject]
@inject HttpClient Http

🎯 마무리

비동기 프로그래밍은 Blazor 애플리케이션에서 반응성 좋은 UI를 만드는 핵심 기법입니다. OnInitializedAsync를 활용하면 컴포넌트 초기화 시점에 자연스럽게 데이터를 로딩할 수 있으며, Blazor의 이중 렌더링 특성을 이해하면 로딩 상태를 손쉽게 표현할 수 있습니다.

실전에서는 다음 순서로 접근하면 안정적인 비동기 컴포넌트를 만들 수 있습니다.

1. 상태 변수를 null로 초기화 (로딩 구분용)
2. isLoading 플래그로 스피너 표시
3. try/catch/finally로 오류·완료 처리
4. 로딩 로직을 별도 async Task 메서드로 분리 (재시도 지원)
5. 외부 자원(타이머, 구독)은 IDisposable로 정리