Binding 실습

🛠 Step 1. 환경 세팅

1. User.razor 파일 생성

이전의 Binding.razor는 삭제하고, 새로운 컴포넌트 User.razor를 생성합니다.

@page "/user"

<h3>Online Users</h3>

@code {
    // C# 코드 영역
}

---

2. 사이드바 메뉴 등록 (NavMenu.razor)

기존 Binding 링크 삭제 후, User 링크로 교체합니다.

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

---

3. UserData 모델 생성

Data 폴더 내 UserData.cs 파일 생성

namespace BlazorApp.Data
{
    public class UserData
    {
        public string Name { get; set; }
    }
}

---

📌 Step 2. 유저 목록 출력 (단방향 바인딩)

@page "/user"
@using BlazorApp.Data

<h3>Online Users</h3>

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

<ul class="list-group">
    @foreach (var user in _users)
    {
        <li @key="user" class="list-group-item">
            <label>@user.Name</label>
        </li>
    }
</ul>

@code {
    List<UserData> _users = new();

    protected override void OnInitialized()
    {
        _users.Add(new UserData() { Name = "Shung" });
        _users.Add(new UserData() { Name = "Kong" });
        _users.Add(new UserData() { Name = "Hi" });
    }
}

📌 해설:

• @_users.Count() → 단방향 바인딩을 통해 유저 수 출력
• foreach를 이용해 사용자 이름 리스트 출력
• OnInitialized()는 페이지 최초 로드시 자동 실행되는 함수입니다

---

🔄 Step 3. 사용자 추가 (양방향 바인딩)

<div class="container">
    <div class="row">
        <div class="col">
            <input class="form-control" placeholder="Add User" @bind-value="_inputName" />
        </div>
        <div class="col">
            <button class="btn btn-primary" type="button" @onclick="AddUser">Add a User</button>
        </div>
    </div>
</div>

@code {
    string _inputName;

    void AddUser()
    {
        _users.Add(new UserData() { Name = _inputName });
        _inputName = string.Empty;
    }
}

📌 해설:

• @bind-value="_inputName": 입력한 값을 C# 변수로 자동 반영 (양방향 바인딩)
• 버튼 클릭 시 AddUser() 호출 → 리스트에 새 유저 추가
• 입력창 초기화도 함께 처리

---

❌ Step 4. 사용자 삭제 (람다식 + 인자 바인딩)

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

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

📌 해설:

• @onclick="() => KickUser(user)" → 인자 전달을 위한 람다식 사용
• user 객체를 받아 리스트에서 제거
• 실시간 반영됨 (Razor 컴포넌트는 상태 변경 시 자동 렌더링)

---

🎯 바인딩 요약

바인딩 종류	설명	예시 코드
단방향 바인딩	C# → HTML 데이터 표시	@_value, @user.Name
양방향 바인딩	C# ↔ HTML (입력값 반영)	@bind-value="_inputName"
속성 바인딩	속성 값을 조건부로 제어	disabled="@(_users.Count >= 5)"
이벤트 바인딩	이벤트 핸들러 함수와 연결 (버튼 클릭 등)	@onclick="AddUser", @onclick="()=>KickUser"

---

✅ 실습 결과 예시

• 초기 유저 3명 출력
• 입력 후 Add a User 버튼 클릭 시 유저 추가
• 각 유저 옆의 Kick 버튼 클릭 시 리스트에서 삭제됨

---