Binding

1. 프로젝트 생성 및 기본 구조

🔧 새 프로젝트 생성
기존에 다양한 프로젝트가 설정되어 있는 HelloEmpty 대신, 바인딩 전용 새로운 Blazor Server 앱을 생성합니다.

• Blazor 서버 앱을 선택합니다.
• 생성 시 특별한 옵션 없이 기본값으로 생성합니다.

📁 주요 구조

• Pages/ : Razor 컴포넌트가 위치하는 폴더
• Shared/NavMenu.razor : 사이드 메뉴 설정
• MainLayout.razor : 레이아웃 컴포넌트
• .razor 확장자 : HTML + C# 조합

---

2. 한 방향 바인딩 (One-way Binding)

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>

@code {
    int _value = 15;
}

✅ 설명

• @page "/binding" : URL 경로를 설정합니다.
• <p>Value : @_value</p> : C# 변수 _value를 UI에 출력합니다.
• @_value : @code 블록에서 정의된 변수를 참조함
• 한 방향 바인딩이란 C# 코드 → HTML 출력만 되는 구조입니다.

---

3. 양방향 바인딩 (Two-way Binding)

@page "/binding"

<h3>Binding</h3>

<p>Value : @_value</p>
<input type="range" step="1" @bind-value="_value" min="0" max="100" @bind-value:event="oninput"/>

@code {
    int _value = 15;
}

✅ 설명

• <input type="range"> : 슬라이더 UI 요소입니다.
• @bind-value="_value" : 슬라이더의 값을 _value 변수와 양방향 연동합니다.
• @bind-value:event="oninput" : 값을 변경할 때마다 실시간 반영합니다.
• HTML ↔ C# 양방향 데이터 흐름이 특징입니다.

---

4. 사이드바 메뉴에 라우팅 추가

Shared/NavMenu.razor에 다음 항목 추가:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="binding">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Binding
    </NavLink>
</div>

📝 이렇게 하면 localhost:xxxx/binding 주소로 이동 가능하며, 좌측 메뉴에 “Binding”이 나타납니다.

---

5. 바인딩 실습 예제 - 유저 목록 관리

📄 User.razor

@page "/user"
@using BlazorApp.Data

<h3>Online User</h3>

<p>Users: <b>@_users.Count()</b></p>

<ul class="list-group">
    @foreach(UserData user in _users)
    {
        <li @key="user" class="list-group-item">
            <button class="btn btn-link" @onclick="(() => KickUser(user))">ban</button>
            <label>@user.Name</label>
        </li>
    }
</ul>

<div class="container mt-3">
    <div class="row">
        <div class="col">
            <input class="form-control" placeholder="Add User" @bind-value="_inputName" />
        </div>
        <div class="col">
            <button class="@_btnClass" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">Add a User</button>
        </div>
    </div>
</div>

@code {
    List<UserData> _users = new();
    string _inputName;
    string _btnClass = "btn btn-primary";

    protected override void OnInitialized()
    {
        _users.Add(new UserData() { Name = "Rookiss" });
        _users.Add(new UserData() { Name = "Faker" });
        _users.Add(new UserData() { Name = "Deft" });
    }

    void AddUser()
    {
        _users.Add(new UserData() { Name = _inputName });
        _inputName = "";
        RefreshButton();
    }

    void KickUser(UserData user)
    {
        _users.Remove(user);
        RefreshButton();
    }

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

✅ 핵심 포인트

• @bind-value="_inputName" : 입력된 값을 _inputName에 저장
• @onclick="AddUser" : 버튼 클릭 시 리스트에 유저 추가
• disabled="@(_users.Count() >= 5)" : 유저가 5명이 넘으면 버튼 비활성화
• @_btnClass : 홀수/짝수에 따라 버튼 색상 바뀜

---

6. 속성 바인딩 (Attribute Binding)

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

✅ 설명

• class="@_btnClass" : C# 변수로 class 속성을 제어
• disabled="@(조건식)" : 조건에 따라 버튼을 비활성화할 수 있음

속성 바인딩을 활용하면 유저 수에 따라 UI 상태를 동적으로 바꿀 수 있어 실무에서도 자주 사용됩니다.

---

7. Blazor 구성 요소의 구조 정리

Razor 컴포넌트는 다음과 같은 세 가지 구성 요소를 가집니다:

구성	설명
@page, @inject	라우팅 경로, 서비스 주입 등 메타 설정
HTML + @코드	뷰(UI) 영역
@code 블록	C# 로직 및 변수 정의

---