Binding 보충

📌 1. HTML 속성 바인딩 (Attribute Binding)

Blazor에서는 단순히 값만 바인딩하는 것이 아니라, HTML 속성(Attribute)에도 바인딩이 가능하다.

✅ 기존 버튼

<button class="btn btn-primary" type="button" @onclick="AddUser">Add a User</button>

⏩ 변경된 코드: 클래스 속성 바인딩

<button class="@_btnClass" type="button" @onclick="AddUser">Add a User</button>

@code {
    string _btnClass = "btn btn-primary";

    void RefreshButton()
    {
        if (_users.Count % 2 == 0)
            _btnClass = "btn btn-primary";
        else
            _btnClass = "btn btn-secondary";
    }
}

사용자를 추가하거나 삭제할 때마다 RefreshButton()을 호출하여 버튼 색상을 변경한다.

---

📌 2. 조건부 속성 바인딩 (Conditional Attribute Binding)

속성 자체에 조건문을 붙여 특정 상황에 따라 속성을 유동적으로 적용할 수 있다.

✅ 조건부 disabled 속성 추가

<button class="@_btnClass" type="button"
        @onclick="AddUser"
        disabled="@(_users.Count() >= 5)">
    Add a User
</button>

유저가 5명 이상일 경우 버튼이 자동으로 비활성화(disabled) 된다.

---

📌 3. StateHasChanged로 수동 UI 갱신하기

일반적인 바인딩은 자동으로 UI에 반영되지만, 비동기 타이머나 외부 쓰레드와 같이 Blazor의 렌더링 사이클을 벗어난 경우에는 수동으로 UI를 갱신해야 한다.

✅ Counter.razor 예제

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-secondary" @onclick="AutoIncrement">Auto Increment</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    void AutoIncrement()
    {
        var timer = new Timer((e) =>
        {
            InvokeAsync(() =>
            {
                IncrementCount();
                StateHasChanged(); // 수동으로 UI 갱신
            });
        }, null, 1000, 1000);
    }
}

StateHasChanged()를 호출하지 않으면 UI는 갱신되지 않으므로, 반드시 호출해야 한다.

---