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" }
        };
}

id단, 웹 페이지의 렌더링된 <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">

앞의 예제에서는 첫 번째 <input> 요소()id="useIndividualParams"에 대한 필드를 사용하지만 구성 요소 매개 변수를 사용할 때 동일한 동작이 적용됩니다.

임의 특성

임의 특성을 허용하려면 속성을 CaptureUnmatchedValues로 설정하여 true를 정의합니다.

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

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

요소 특성의 위치에 상대적인 @attributes의 위치는 중요합니다. 렌더링된 요소에서 스플래트되는 경우 @attributes 특성은 오른쪽에서 왼쪽으로(마지막에서 첫 번째) 처리되며, 공통 특성에 대해 첫 번째 특성이 승리합니다. 자식 구성 요소를 사용하는 부모 구성 요소의 다음 예제를 살펴보겠습니다. 여기서 자식은 "extra" 특성을 설정하고 부모 구성 요소는 자식 구성 요소에 "extra" 특성을 배치합니다.

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" 이 포함됩니다. 이는 속성이 오른쪽에서 왼쪽으로(마지막에서 첫 번째로) 처리되며, 첫 번째 "extra" 속성이 승리하는데, 이는 extra 구성 요소의 하드 코딩된 AttributeOrderParent1 HTML 속성이기 때문입니다.

<div extra="5" />

다음 예제에서는 자식 구성 요소의 extra에서 @attributes와 <div>의 순서가 뒤바뀝니다. 이 시나리오에서 AttributeOrderParent2 구성 요소의 렌더링된 <div>은 추가 특성이 전달될 때 extra="10"를 포함합니다. 이는 처리된 첫 번째 "extra" 특성이 부모 구성 요소의 분산된 extra HTML 특성이기 때문입니다.

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