ASP.NET Core Blazor 특성 스플래팅 및 임의 매개 변수

구성 요소는 구성 요소의 선언된 매개 변수 외에, 추가 특성도 캡처하고 렌더링할 수 있습니다. 지시문 특성을 사용하여 구성 요소를 렌더링할 때 사전에서 추가 특성을 캡처한 다음 스플래팅이라는 요소에 @attributesRazor 적용할 수 있습니다. 이 시나리오는 다양한 사용자 지정을 지원하는 태그 요소를 생성하는 구성 요소를 정의하는 데 유용합니다. 예를 들어, 많은 매개 변수를 지원하는 <input>에 대해 개별적으로 특성을 정의하는 것이 번거로울 수 있습니다.

특성 스플래팅

다음은 Splat 구성 요소에 대한 설명입니다.

• 첫 번째 <input> 요소(id="useIndividualParams")는 개별 구성 요소 매개 변수를 사용합니다.
• 두 번째 <input> 요소(id="useAttributesDict")는 특성 스플래팅을 사용합니다.

Splat.razor:

@page "/splat"

<PageTitle>SPLAT!</PageTitle>

<h1>Splat Parameters Example</h1>

<input id="useIndividualParams"
       maxlength="@maxlength"
       placeholder="@placeholder"
       required="@required"
       size="@size" />

<input id="useAttributesDict"
       @attributes="InputAttributes" />

@code {
    private string maxlength = "10";
    private string placeholder = "Input placeholder text";
    private string required = "required";
    private string size = "50";

    private Dictionary<string, object> InputAttributes { get; set; } =
        new()
        {
            { "maxlength", "10" },
            { "placeholder", "Input placeholder text" },
            { "required", "required" },
            { "size", "50" }
        };
}

웹 페이지의 렌더링된 <input> 요소는 동일합니다.

<input id="useIndividualParams"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

<input id="useAttributesDict"
       maxlength="10"
       placeholder="Input placeholder text"
       required="required"
       size="50">

임의 특성

임의 특성을 허용하려면 CaptureUnmatchedValues 속성을 true로 설정하여 구성 요소 매개 변수를 정의합니다.

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? InputAttributes { get; set; }
}

[Parameter]의 CaptureUnmatchedValues 속성을 사용하면 해당 매개 변수는 다른 매개 변수와 일치하지 않는 모든 특성을 일치시킬 수 있습니다. 구성 요소는 CaptureUnmatchedValues를 사용하여 단일 매개 변수만 정의할 수 있습니다. CaptureUnmatchedValues에 사용되는 속성 형식은 문자열 키가 있는 Dictionary<string, object>에서 할당할 수 있어야 합니다. 이 시나리오에서는 IEnumerable<KeyValuePair<string, object>> 또는 IReadOnlyDictionary<string, object>의 사용도 옵션입니다.

요소 특성의 위치에 상대적인 @attributes의 위치는 중요합니다. 요소에 @attributes가 스플래팅되면 오른쪽에서 왼쪽으로(마지막에 도달하면 처음으로) 특성이 처리됩니다. 자식 구성 요소를 사용하는 부모 구성 요소에 대한 다음 예제를 살펴보세요.

AttributeOrderChild1.razor:

<div @attributes="AdditionalAttributes" extra="5" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

AttributeOrder1.razor:

@page "/attribute-order-1"

<PageTitle>Attribute Order 1</PageTitle>

<h1>Attribute Order Example 1</h1>

<AttributeOrderChild1 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild1 component.
</p>

AttributeOrderChild1 구성 요소의 extra 특성은 @attributes 오른쪽으로 설정됩니다. 특성은 오른쪽에서 왼쪽으로(마지막에 도달하면 처음으로) 처리되기 때문에 AttributeOrderParent1 구성 요소의 렌더링된 <div>는 추가 특성을 통해 전달될 때 extra="5"를 포함합니다.

<div extra="5" />

다음 예제에서는 extra 및 @attributes의 순서가 자식 구성 요소의 <div>에서 바뀌어 있습니다.

AttributeOrderChild2.razor:

<div extra="5" @attributes="AdditionalAttributes" />

@code {
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

AttributeOrder2.razor:

@page "/attribute-order-2"

<PageTitle>Attribute Order 2</PageTitle>

<h1>Attribute Order Example 2</h1>

<AttributeOrderChild2 extra="10" />

<p>
    View the HTML markup in your browser to inspect the attributes on
    the AttributeOrderChild2 component.
</p>

추가 특성을 통해 전달된 경우 부모 구성 요소의 렌더링된 웹 페이지에 있는 <div>에 extra="10"이 포함됩니다.

<div extra="10" />