[Web] 컴포넌트 재사용

동일한 기능을 수행하는 컴포넌트를 다른 페이지에서 재사용하기위해 단순히 전체 스크립트를 복사-붙여넣기 하는 방식이 아닌 컴포넌트로 관리하여 다른 페이지에서 불러오면 되는 방식을 학습하였습니다. 파라미터, 레퍼런스, 콜백이벤트를 다룹니다.

· ShowUser.razor

<!-- 이 컴포넌트는 페이지가 아니라 페이지의 구성요소 중 하나이기에 @page 선언 안함-->

<!-- 스크립트 참조 -->
@using BlazorApp.Data;

<p>
	유저 수: <b>@Users.Count()</b>
</p>

<br />

<ul class="list-group">
	@foreach (UserData user in Users)
	{
		<!-- @key="user" li가 사용하는 대상이 user라고 명시적으로 알려주는 속성-->
		<li @key="user" class="list-group-item">
			<button type="button" class="btn btn-link" @onclick="(() => RemoveUser(user))">❌</button>
			<label>@user.Name</label>
		</li>
	}
</ul>

<br />

@code {

	// 파라미터를 명시하여 사용
	[Parameter] public List<UserData> Users { get; set; }

	// 자식 컴포넌트에서 부모의 컴포넌트 함수를 호출하기위한 액션함수
	[Parameter]
	public EventCallback CallBackTest { get; set; }

	// 해당 페이지에 접속한경우, Unity의 Start와 비슷한 느낌
	protected override void OnInitialized()
	{
		//더미 데이터 세개 추가
		Users.Add(new UserData() { Name = "Kim" });
		Users.Add(new UserData() { Name = "Lee" });
		Users.Add(new UserData() { Name = "Park" });
	}

	public void AddUser(UserData user)
	{
		Users.Add(user);
	}

	public void RemoveUser(UserData user)
	{
		Users.Remove(user);

		CallBackTest.InvokeAsync(null);
	}
}

• 유저 수를 보여주는 컴포넌트를 분리하여 다른 페이지에서는 간단하게 호출만하면 이 기능을 보여줄 수 있도록 새로운 클래스파일을 생성하여 구현합니다.

 

// 파라미터를 명시하여 사용
[Parameter] public List<UserData> Users { get; set; }

// 자식 컴포넌트에서 부모의 컴포넌트 함수를 호출하기위한 액션함수
[Parameter]
public EventCallback CallBackTest { get; set; }

• [Parameter]은 외부에서 이 컴포넌트의 변수들을 사용한다는 목적으로 선언하는것입니다.
• ShowUser.razor을 사용하는 다른 페이지는 ShowUser 내부 스크립트 기능을 이용하기위해 이 파라미터에 접근합니다.

 

· User.razor

<!-- 페이지 이름 지정 -->
@page "/user"

<!-- 필요한 스크립트 Using -->
@using BlazorApp.Data;

<h3>Online Users</h3>

<ShowUser Users="_users" CallBackTest="CallBackTestFunc" @ref="_showUser"></ShowUser>

<div class="container">
	<div class="row">
		<div class="col">
			<input class="form-control" placeholder="Add User" @bind-value="_inputName" />
		</div>
		<div class="col">
			<!-- 속성(attribute)에도 바인딩을 할 수 있음!-->
			<!-- conditional attruibute 속성 자체에 조건을 붙일 수 있음!-->
			<button class="btn btn-primary" type="button" @onclick="AddUser" disabled="@(_users.Count() >= 5)">Add a User</button>
		</div>
	</div>
</div>

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

	string _inputName;

	private void AddUser()
	{
		_showUser.AddUser(new UserData() { Name = _inputName });
	}

	private void KickUser(UserData user)
	{
		_showUser.RemoveUser(user);
	}

	void CallBackTestFunc()
	{ 
		_inputName = "CallbackTest";

		//StateHasChanged(); EventCallback을 사용할경우 업데이트를 자동으로 해줌!
	}
}

• User.razor에서는 ShowUser에 해당하는 HTML코드가 제거되고 아래의 코드로 대체되어있습니다.

 

<ShowUser Users="_users" CallBackTest="CallBackTestFunc" @ref="_showUser"></ShowUser>

• <ShowUser>에서 Users="_users"는 User.razor의 컴포넌트에 있는 스크립트에서 사용할 _users변수를 ShowUser.razor의 Users와 동기화 시키겠다는 표현입니다.
• CallBackTest="CallBackTestFunc은 콜백함수인 CallBackTestFunc()을 CallBackTest변수에 바인딩한 것 입니다.

 

• 빨간 사각형 영역의 내용은 ShowUser.razor 컴포넌트 구성요소에 의해 생성되었습니다.