Part 6-5-3. Blazor 입문 : Binding 보충

 

 

🦮 Blazor 입문

 

 지난 시간에는 Blazor의 Binding을 User.razor 스크립트를 통해 실습해보며 간단한 페이지를 제작하는 시간을 가져보았다. 이번 시간에는 일전에 학습한 Binding의 추가적인 내용에 대해서 보충하는 시간을 가진다. 마찬가지로 이번에도 직접 실습해보며 간단한 페이지를 제작하는 시간을 가져보며 학습해보도록 한다. 

 

 

---

 

🏄‍♀️ Binding 보충

 

 Binding은 HTML의 속성(attribue)에도 바인딩 할 수 있다. 따라서 기존에 작성한 User.razor 스크립트의 유저 추가 class의 버튼을 아래와 같이 변경하여 사용할 수 있다.

 

@page "/user"

...

<!-- 유저 추가 -->
<div class="container">
	<div class="row">
		<div class="col">
			<input class="form-control" placeholder="Add User" @bind-value="_inputName" />
		</div>
		<div class="col">
			<!-- HTML의 속성(attribue)에도 바인딩을 할 수 있다. -->
			<button class="@_btnClass" type="button" @onclick="AddUser">Add a User</button>
		</div>
	</div>
</div>
	

@code
{
	// 유저 데이터 생성 
	List<UserData> _users = new List<UserData>();

	// 유저 이름 입력
	string _inputName;
	string _btnClass = "btn btn-primary";

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

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

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

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

 

 먼저 일전에 사용하던 btn의 클래스 명 'btn btn-primary'를 _btnClass 변수로 받아주자. 이 후 사용자를 추가, 혹은 삭제할 때마다 RefreshButton 함수를 동작하게 변경한다. RefreshButton 함수는 2의 배수일 때마다 버튼의 타입을 변경해주는 함수이다. 위와 같이 수정한 후 실행하여 보면 아래와 같은 결과를 얻을 수 있다.

 

 

 위와 같이 유저의 수가 2배수일 때마다 버튼의 색상이 변경되는 것을 볼 수 있다. 이를 통해 HTML의 속성에도 Binding을 할 수 있는 것을 알아보았다.

 

---

 

 하지만 HTML의 속성 뿐만 아니라 conditional atrribue 속성 자체에도 조건을 붙일 수 있다. 다음과 같이 유저 클래스를 또 수정해보도록 하자.

 

@page "/user"

...

<!-- 유저 추가 -->
<div class="container">
	<div class="row">
		<div class="col">
			<input class="form-control" placeholder="Add User" @bind-value="_inputName" />
		</div>
		<div class="col">
			<!-- HTML의 속성(attribue)에도 바인딩을 할 수 있다. -->
            		<!-- conditional attribue 속성 자체에 조건을 붙일 수도 있다. -->
			<button class="@_btnClass" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">Add a User</button>
		</div>
	</div>
</div>
	

@code
{
	// 유저 데이터 생성 
	List<UserData> _users = new List<UserData>();

	// 유저 이름 입력
	string _inputName;
	string _btnClass = "btn btn-primary";

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

	...
}

 

 나머지 코드는 기존과 동일하지만 @onclick="AddUser"에 disalbed 조건을 유저의 수가 5명 이상일 때에는 비활성화 하도록 처리할 수 있다. 프로젝트를 실행하여 이를 확인해보자.

 

 

 코드에 작성한 것과 같이 유저에 수가 5명을 초과할 경우 더 이상 유저를 새롭게 추가하지 못하도록 버튼이 비활성화 되는 것을 볼 수 있다. 따라서 이를 통해 conditional attribue 속성 자체에 조건을 붙일 수도 있다.는 것을 확인할 수 있다.

 

---

 

마지막으로 알아볼 것은 UI가 항상 100%의 확률로 갱신되는 것이 아니라는 것을 보여주는 예시이다. 이 떄에는 수동으로 UI를 갱신해야 하는데 아래 예제를 통해 확인해보자. 먼저 기존의 user.Razor 스크립트를 사용하는 것이 아닌 count 스크립트에서 이를 테스트하자.

 

@page "/counter"

@using System.Threading;

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">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();
				// 수동으로 UI를 갱신한다.
				StateHasChanged();
			});
		}, null, 1000, 1000);
	}
}

 

 기존의 버튼을 클릭할 때 count가 증가하는 IncrementCount 버튼 클래스를 복사하여 AutoIncrement 스크립트로 변경한 뒤 해당 함수를 만들어주도록 하자. AutoIncrement는 쓰레드를 이용할 것이기 때문에 Threading을 사용한다고 명시해야 한다.

 

 AutoIncrement 함수는 타이머와 InvokeAsync를 통해 IncrementCount를 1초마다 호출한다. 만약 StateHasChanged()를 사용하지 않는다면 해당 버튼을 클릭해도 UI상에서 카운트는 증가했음에도 불구하고 값이 변경되지 않는다. 따라서 StateHasChanged() 함수를 통해 수동으로 UI를 갱신해야 한다.