[Web] Cascading 파라미터

스크립트에 포함된 변수를 다른 컴포넌트에서도 접근하도록 하기위해 바인딩을 사용하지만 컴포넌트 안에 또다른 컴포넌트가 포함될때 해당 컴포넌트에게까지 변수를 접근하도록 하기위해서 간편한 방법인 Cascading이 있습니다. 매우 간단한 내용입니다.

· Cascading

• 상위 구성 요소에서 원하는 수의 하위 구성 요소로 데이터를 전달하는 편리한 방법을 제공합니다.

ASP.NET Core Blazor 연계 값 및 매개 변수

 

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

<!-- 필요한 스크립트 Using -->
@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>

<br />

<!-- Cascading 파라미터는 영역에 포함된 모든 대상에게 이 변수 접근을 허용 -->
<CascadingValue Name="ThemeColor" Value="_selectedColor">
	<ShowUser Users="_users" CallBackTest="CallBackTestFunc" @ref="_showUser"></ShowUser>
</CascadingValue>

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

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

	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을 사용할경우 업데이트를 자동으로 해줌!
	}
}

<!-- Cascading 파라미터는 영역에 포함된 모든 대상에게 이 변수 접근을 허용 -->
<CascadingValue Name="ThemeColor" Value="_selectedColor">
	<ShowUser Users="_users" CallBackTest="CallBackTestFunc" @ref="_showUser"></ShowUser>
</CascadingValue>

• <CascadingValue>를 이용하여 이 영역에 포함된 모든 다른 컴포넌트가 ThemeColor라는 이름으로 변수를_selectedColor의 실제값을 사용할 수 있도록 합니다.

 

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

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

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

<br />

<!-- Cascading 파라미터를 받은 ShowUser이 Counter.razor을 호출하는경우 Counter또한 Cascading 파라미터를 사용할 수 있음 -->
<Counter></Counter>

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

<br />

@code {
	
	// Cascading 파라미터를 사용하기 위해 새로운 명시적 표현
	[CascadingParameter(Name = "ThemeColor")]
	string _color { get; set; }

	// 파라미터를 명시하여 사용
	[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);
	}
}

// Cascading 파라미터를 사용하기 위해 새로운 명시적 표현
[CascadingParameter(Name = "ThemeColor")]
string _color { get; set; }

• 코드 영역에 [CascadingParameter(Name = "")]이라는 명시적 표현으로 Name의 값에 해당하는 이름의 데이터를 받아오도록 합니다.

 

<label style="color:@_color">@user.Name</label>

• color:@_color을 이용하여 코드영역의 _color을 사용합니다.
• 사용하는 _color변수는 User.razor의 코드영역에있는 _selectedColor

 

@page "/counter"

@using System.Threading;
<PageTitle>Counter</PageTitle>

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

    // Cascading 파라미터를 사용하기 위해 새로운 명시적 표현
    [CascadingParameter(Name = "ThemeColor")]
    string _color { get; set; }

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    private void AutoIncrement()
    {
        var timer = new Timer(x =>
        {
            InvokeAsync(() =>
            {
                IncrementCount();

                //명시적으로 상태를 변경했다고 알려줌!
                StateHasChanged();
            });
        }, null, 1000, 1000);
    }
}

// Cascading 파라미터를 사용하기 위해 새로운 명시적 표현
[CascadingParameter(Name = "ThemeColor")]
string _color { get; set; }

• Counter.razor 또한 ShowUser.razor에서 포함되기때문에 User.razor의 _selectedColor를 사용할 수 있게 됩니다.

 

• Theme Color을 변경하면 하위 컴포넌트인 Counter와 ShowUser또한 색상이 변경된것을 볼 수 있습니다.