Cascading Parameter

Cascading Parameter의 사용 이유

Cascading Parameter는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 중간 단계의 컴포넌트들이 해당 데이터를 명시적으로 전달하지 않아도 되도록 합니다. 이를 통해 코드의 간결성과 유지보수성을 향상시킬 수 있습니다. citeturn0search0

Cascading Parameter의 사용 방법

1. 상위 컴포넌트에서 CascadingValue 설정

상위 컴포넌트에서 CascadingValue 컴포넌트를 사용하여 전달하려는 값을 설정합니다.

@page "/user"

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

@code
{
    string _selectedColor = "Green";
    List<string> _options = new List<string> { "Red", "Green", "Blue" };
    // 유저 데이터 생성 및 기타 로직
}



위 코드에서 CascadingValue 컴포넌트를 통해 _selectedColor 값을 하위 컴포넌트로 전달합니다.

2. 하위 컴포넌트에서 CascadingParameter로 값 수신

하위 컴포넌트에서는 [CascadingParameter] 특성을 사용하여 상위 컴포넌트에서 전달된 값을 수신합니다.

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

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

    // 유저 데이터 추가 및 기타 로직
}



이렇게 수신한 _color 값을 활용하여 컴포넌트의 스타일이나 로직을 조정할 수 있습니다.

Cascading Parameter의 특징

• 계층 구조의 깊이에 관계없이 전달 가능: Cascading Parameter는 부모-자식 관계뿐만 아니라 손자, 증손자 컴포넌트까지 전달됩니다. 예를 들어, ShowUser 컴포넌트 내에 Counter 컴포넌트를 포함시키면, Counter 컴포넌트에서도 동일한 Cascading Parameter를 사용할 수 있습니다. citeturn0search0

• 여러 개의 Cascading Parameter 사용: 동일한 형식의 여러 값을 전달하려면 각 CascadingValue와 해당 [CascadingParameter]에 고유한 Name을 부여하여 구분할 수 있습니다.