Cascading Parameter

1. 사용하는 이유

User.razor

<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>

ShowUser.razor를 컴포넌트로 사용하고 싶을 때는 위와 같은 한 줄의 코드로 연동을 할 수 있다.

 

<ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
<ExctUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ExctUser>
<GiveUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></GiveUser>
...

그런데 위와같이 컴포넌트가 필요할 때 마다 User.razor와 연동을 하게 된다면 이는 제법 번거로운 작업이 될 수 있다.

그래서 다수의 컴포넌트에 대해 공통된 연동 작업을 한 번에 처리하기 위해 Cascading Parameter를 사용한다.

 

2. 사용방법

User.razor

<CascadingValue Name="ThemeColor" Value="_selectedColor">
    <!-- 연동할 컴포넌트의 자리 -->
    <ShowUser Users="_users" CallbackTest="CallbackTestFunc" @ref="_showUser"></ShowUser>
</CascadingValue>

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

우선 위의 두 코드블럭을 기존의 User.razor에 추가한다. 인자 중에서  Name과 Value가 있는데 Name은 사용할 캐스캐이딩 파라미터의 이름을 구분해주는 역할이고, Value는 코드에서 연동할 변수를 넣어주면 된다.

 

ShowUser.razor

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

그리고 ShowUser.razor에는 CascadingParameter를 정의한다.

 

3. 사용예시

ShowUser.razor

<ul class="list-group">
    @foreach (UserData user in Users)
    {
        <li @key="user" class="list-group-item">
            <button type="button" class="btn btn-link" @onclick="(()=>KickUser(user))">ban</button>
            <label style="color:@_color">@user.Name</label>
        </li>
    }
</ul>

가시적인 결과를 확인해보기 위해서 Cascading Parameter로 정의된 6번째 줄의 @_color로 코드와 연동해본다.

 

User.razor

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

 

실행결과.

초록색 글자

빨간색 글자로 변경

 

참고로 Cascading Parameter는 User의 자식 컴포넌트인 ShowUser컴포넌트 뿐 아니라 ShowUser의 자식 컴포넌트 또 자식의 자식 컴포넌트 까지 모두 적용된다.