Part 6-5-2. Blazor 입문 : Binding 실습

 

 

🦮 Blazor 입문

 

 지난 시간에는 Blazor 서버 앱 프로젝트를 새롭게 만들어 Binding을 하기 위한 테스트 페이지를 만들고, 간단한 기능을 Binding 하여 테스트해보았다. 이번 시간에는 일전에 학습한 Blazor의 Binding을 실습해보며 간단한 페이지를 제작하는 시간을 가져보며 학습해보도록 한다. 

 

 

---

 

🏄‍♀️ Binding 실습

 

  먼저, 기존에 기사용하던 Binding.Razor 스크립트를 다시 사용하는 것이 아닌, 새로운 레이저 스크립트인 User.Razor를 만들어주도록 하자. 기존의 스크립트는 지워버리고 User.Razor 스크립트를 작성하도록 하자.

 

@page "/user"

<h3>Online Users</h3>

@code
{
	
}

 

 먼저 일전에 말했던 것과 마찬가지로 라우팅 페이지를 설정해주고, Inject을 주입해주어야 한다. 페이지의 이름을 @page "/user"를 통해 설정해주고, 기존의 NavMesh.razor에 있는 Binding 페이지를 지워준 뒤 새롭게 만들어준 user 페이지로 변경하자.

 

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        // 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>
    </nav>
</div>

 

 이 후 UserData라는 데이터를 사용하기 위해 Data 폴더 내부에 UserData.cs를 새롭게 만들어주고, 간략하게 이름만 사용하도록 클래스를 생성해주자.

 

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

 

 이렇게 까지하면, User.Razor 페이지를 실습하기 위한 기본 환경 세팅은 모두 완료되었다.

 

---

 

@page "/user"

@using BlazorApp.Data;

<h3>Online Users</h3>

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

<br />

<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 List<UserData>();

	// 유저 데이터 추가
	protected override void OnInitialized()
	{
		_users.Add(new UserData() { Name = "Shung" });
		_users.Add(new UserData() { Name = "Kong" });
		_users.Add(new UserData() { Name = "Hi" });
	}
}

 

 페이지의 제목은 Online Users로 설정하고, @code 영역 내의 List로 UserData를 사용하기 위해 @using BlazorApp.Data를 주입해준다. 이 후 @code 영역에 리스트를 생성하고, 유니티의 Start 함수와 같은 형태로 동작하는 OnInitialized() 함수를 통해 3개의 기본 데이터를 넣어주도록 하자. 이 후, 해당 데이터가 정상적으로 출력되는지 확인을 위해 UI를 생성해야 하는데 <ul class="list-group> ~ </ul> 안에 내용을 작성하여 유저의 이름이 나타나도록 설정하자.

 

 이 후 실행해보면 아래와 같이 User 탭이 새롭게 생긴 것을 볼 수 있으며 제목으로 Online Users와 Count를 통한 유저의 수, 그리고 우리가 설정한 기본 3개의 유저가 나타나는 것을 볼 수 있다.

 

유저 이름 설정 👍

 

---

 

🏄‍♀️ 사용자 추가

 

 유저 데이터를 매 번 수기로 입력할 수 없는 법. 홈페이지에서 사용자를 추가하는 방법에 대해서 실습하도록 하자. 

 

@page "/user"

@using BlazorApp.Data;

<h3>Online Users</h3>

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

<br />

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

<br />

<!-- 유저 추가 -->
<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
{
	// 유저 데이터 생성 
	List<UserData> _users = new List<UserData>();

	// 유저 이름 입력
	string _inputName;

	// 유저 데이터 추가
	protected override void OnInitialized()
	{
		_users.Add(new UserData() { Name = "Shung" });
		_users.Add(new UserData() { Name = "Kong" });
		_users.Add(new UserData() { Name = "Hi" });
	}

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

 

 먼저 class="container"를 통해 새로운 클래스를 만들어주고, input의 영역과 btn의 영역을 새롭게 만들어주도록 하자. input의 영역은 관리자가 사용자의 이름을 추가할 수 있는 입력 영역을 나타내며, btn 영역은 입력한 글자를 리스트에 추가해주도록 한다.

 

 input 클래스는 placeholder를 사용하여, 이것이 사용자를 추가하는 영역임을 알 수 있도록 "Add Use" 텍스트가 나타나도록 설정하고, 사용자의 입력을 받아오기 위해 _inputName 변수를 참조하여 사용한다.

 

 btn 클래스는 유니티와 동일하게 oncliek를 통해 AddUser 함수를 참조하고 있는 것을 알 수 있으며, 해당 버튼의 이름이 Add a User로 설정되어 있는 것을 볼 수 있다. 따라서 위와 같이 작성한 뒤 실행해보면 아래와 같은 결과를 볼 수 있다.

 

 

 직접 Add User에 일부 데이터를 넣고 버튼을 눌러서 추가해보면 정상적으로 _users 리스트안에 데이터가 들어가는 것을 볼 수 있다.

 

---

🏄‍♀️ 사용자 삭제

 

 다음은 사용자를 삭제하는 기능을 만들어보도록 하자. UI 상으로 유저의 이름 왼편에 'X'버튼과 같이 사용자를 지우는 기능이 있으면 좋겠으니 기존의 코드를 다음과 같이 수정하도록 하자.

 

@page "/user"

@using BlazorApp.Data;

<h3>Online Users</h3>

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

<br />

<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>

<br />

<!-- 유저 추가 -->
...
	

@code
{
	...

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

 

 유저의 이름을 출력하는 foreach문에서 새롭게 button을 하나 만들어 주도록하자. 마찬가지로 onclick을 통해 사용자를 삭제하는 KickUser 함수를 바인딩해서 연결해주자. 이 때 onclick는 기본적으로 인자 값을 받을 수 없기 때문에 람다 식을 이용해야 한다. 이 때 자세히보면 foreach 문을 통해 특정 유저 데이터(user)에 접근할 수 있음을 알 수 있다. (페이커, 데프트 등) 따라서 람다식과 user를 통해 사용자를 삭제하도록 하자. KickUser의 함수 내부에는 Remove를 통해 해당 데이터를 삭제하는 것만 처리하도록 한다.

 

 이 후, 프로그램을 실행하면 다음과 같이 유저를 삭제할 수 있는 Kick 기능이 생기는 것을 볼 수 있으며 이를 클릭하면 유저 데이터가 삭제되는 것 까지 볼 수 있다.