Part 6-5-5. Blazor 입문 : Cascading Parameter

 

 

🦮 Blazor 입문

 

 지난 시간에는 Blazor의 Parameter, Ref, EventCallback 등 다양한 개념에 대해서 학습하는 시간을 가져보았다. 파라미터User와 ShowUser 컴포넌트를 넘나들며 기존에 사용하던 _users 데이터를 ShowUser에서도 사용할 수 있도록 설정하였다. 이후 Ref, Action, EventCallback을 사용하여 부모-자식 관계인 User와 ShowUser 컴포넌트 사이 사용되는 함수를 서로 참조하면서 사용할 수 있도록 설정해보았다. 이번 시간에는 Cascading Parameter 라는 개념에 대해서 학습하는 시간을 가져보며 이 또한 직접 실습하며 페이지를 제작한다. 

 

 

---

 

🏄‍♀️ Cascading Parameter

 

 이어서 알아볼 내용은 Cascading Parameter라는 내용이다. Cascading Parameter를 직역하자면 '작은 폭포 파라미터'라고 생각할 수 있는데 말 그대로 해당 함수 내부의 내용은 마치 폭포처럼 흘러내려 모든 곳에서 사용가능하도록 처리하는 것이다. 

 

 만약 ShowUser 뿐만 아니라, 다른 여러 페이지에서 User의 _user를 참조하려고 한다면 여러 페이지에서 [Parameter]를 생성해주고, User에서는 설정하려는 페이지에 파라미터 정보를 모두 적어주어야 한다. 하지만 Cascading Parameter를 사용한다면 하나하나 작성하며 사용하지 않고, 영역 내부의 컴포넌트에게 폭포수처럼 파라미터를 흘려준다. 

 

    	// 아래와 같이 할 수 없는 법..
    	<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
	<TestUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
	<DebugUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>

 

 따라서 이럴 때에 Cascading Parameter 사용한다. 사용방법은 아래 코드에서 보는 것처럼 매우 간단하다. 이 떄 Name과 Value는 이제 실질적으로 구현해보도록 하자. 예를 들어 홈페이지 중앙에서 글씨의 컬러를 수정하는 형태로 진행하여 보자.

 

<CascadingValue Name="ThemeColor" Value="_selectedColor">
	<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
</CascadingValue>

 

---

 

@code
{
	string _selectedColor = "Green";
	List<string> _options = new List<string> { "Red", "Green", "Blue" };

	...
}

 

 User 컴포넌트에 _selectedColor 변수와 _options 리스트를 만들어주자. _selectedColor는 Green으로 설정 후 options에는 빨강, 초록, 파랑의 색을 넣어서 테스트 해보자. 이 후, Cascading Parameter의 Name에는 ThemeColor로 작성하고, Value 값을 _selectedColor로 설정한다.

 

 이 후, ShowUser에서 Cascading Parameter를 설정해주며 키 값으로 설정한 Name에 대해서 작성하고 이를 사용하기 위한 변수 _color를 설정하자.

 

<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>
            		<!-- CascadingParameter 적용 😎 -->
			<label style="color:@_color">@user.Name</label>
		</li>
	}
</ul>

@code
{
	[CascadingParameter(Name = "ThemeColor")]
	public string _color { get; set; }

	[Parameter]
	public List<UserData> Users { get; set; }
	[Parameter]
	public /* Action */ EventCallback CallbackTest { get; set; }

	// 유저 데이터 추가
	...
}

 

 이 후 이를 테스트 할 수 있도록 유저삭제 html label에 style을 적용하여 이를 간략하게 적용해보도록 하자. 이제 다시 User 컴포넌트로 돌아가 Theme Color를 변경하여 설정할 수 있도록 설정하자. 

 

@page "/user"

@using BlazorApp.Data;

<h3>Online Users</h3>

<label>Theme Color</label>
<select class="form-control" @bind="_selectedColor">
	@foreach (var option in _options)
	{
		<option value="@option">
			@option
		</option>
	}
</select>

<CascadingValue Name="ThemeColor" Value="_selectedColor">
	<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
</CascadingValue>

<br />

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

@code
{
	string _selectedColor = "Green";
	List<string> _options = new List<string> { "Red", "Green", "Blue" };

	// 유저 데이터 생성 
	...
}

 

 이 상태에서 이제 실행해보면 User 탭에서 글자를 선택할 수 있도록 드랍다운 목록 리스트가 나타나고, 원하는 색상을 클릭할 경우 유저를 나타내는 글자의 색이 변하는 것을 볼 수 있다.

 

원하는 색상으로 글자를 변경해보자.

 

---

 

 마지막으로, Cascading Parameter의 특징으로는 함수 범위 뿐만 아니라 깊이까지도 상관없다는 특징을 가지고 있다. 이 말이 무슨말이냐면 ShowUser에 <Counter> </Counter>를 넣을 경우, Counter 또한 색깔 변경이 되는 것이다. 

 

@using BlazorApp.Data;

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

<br />

<!-- Counter 추가 🤯 -->
<Counter></Counter>

<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 style="color:@_color">@user.Name</label>
		</li>
	}
</ul>

@code
{
	[CascadingParameter(Name = "ThemeColor")]
	public string _color { get; set; }

	...
}

 

@page "/counter"

@using System.Threading;

<PageTitle>Counter</PageTitle>

<!-- h1 태그에 CascadingParameter 적용 -->
<h1 style="color:@_color">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 {
	// ShowUser의 코드 복사
	[CascadingParameter(Name = "ThemeColor")]
	public string _color { get; set; }

    ...
}

 

ShowUser에 Counter도 색상이 변하는 모습

 

 따라서 위와 같이 코드를 작성하면 부모-자식 관계 뿐만 아니라 손자 아니면 증손자까지 폭포처럼 전달되는 것을 알 수 있다.