다음을 통해 공유

ASP.NET 핵심 Blazor 섹션

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 10 버전을 참조하세요.

이 문서에서는 자식 Razor 구성 요소에서 구성 요소의 Razor 콘텐츠를 제어하는 방법을 설명합니다.

Blazor 섹션

자식 Razor 구성 요소에서 Razor 구성 요소의 콘텐츠를 제어하려면 다음 기본 제공 구성 Blazor 요소를 사용하는 섹션을 지원합니다.

섹션은 레이아웃과 중첩된 부모-자식 구성 요소 모두에서 사용할 수 있습니다.

전달된 SectionName 인수는 모든 형식의 대/소문자를 사용할 수 있지만 설명서에서는 HTML 요소 ID에 대한 일반적인 대/소문자 선택인 케밥 대/소문자(예 top-bar: )를 채택합니다. SectionId 는 정적 object 필드를 수신하며 C# 필드 이름(예: TopbarSection)에 대해 항상 Pascal 대/소문자를 지정하는 것이 좋습니다.

다음 예제에서 앱의 주 레이아웃 구성 요소는 앱 구성 요소에 대한 Counter 증분 카운터 단추를 구현합니다.

섹션의 네임스페이스가 파일에 없 _Imports.razor 으면 다음을 추가합니다.

@using Microsoft.AspNetCore.Components.Sections

MainLayout 구성 요소(MainLayout.razor)에서 구성 요소를 배치 SectionOutlet 하고 문자열 SectionName 을 매개 변수에 전달하여 섹션의 이름을 나타냅니다. 다음 예제에서는 섹션 이름을 top-bar사용합니다.

<SectionOutlet SectionName="top-bar" />

Counter 구성 요소(Counter.razor)에서 구성 요소를 만들고 SectionContent 일치하는 문자열(top-bar)을 해당 SectionName 매개 변수에 전달합니다.

<SectionContent SectionName="top-bar">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

구성 요소에 Counter 액세스할 /counterMainLayout 때 구성 요소는 구성 요소가 배치된 구성 요소 Counter 에서 SectionOutlet 증분 개수 단추를 렌더링합니다. 다른 구성 요소에 액세스하면 증가 횟수 단추가 렌더링되지 않습니다.

명명된 섹션을 사용하는 대신 매개 변수와 함께 정적 object 섹션을 SectionId 전달하여 섹션을 식별할 수 있습니다. 다음 예제에서는 앱의 Counter 기본 레이아웃에서 앱 구성 요소에 대한 증분 카운터 단추도 구현합니다.

다른 SectionContent 구성 요소가 실수로 이름과 SectionOutlet일치하지 않도록 하려면 개체 SectionId 매개 변수를 전달하여 섹션을 식별합니다. RCL(클래스 라이브러리)을 디자인할 Razor 때 유용할 수 있습니다. SectionOutlet RCL에서 개체 참조 SectionId 를 사용하고 소비자가 일치하는 SectionContent 개체를 사용하여 구성 요소를 배치 SectionId 하는 경우 RCL 소비자가 다른 SectionContent 구성 요소를 구현할 때 실수로 이름이 일치할 수 없습니다.

다음 예제에서는 섹션 이름 대신 개체 참조를 사용하여 앱의 Counter 기본 레이아웃에서 앱 구성 요소에 대한 증분 카운터 단추를 구현합니다.

블록의 TopbarSection 구성 요소에 object 정적 MainLayout 을 추가합니다@code.

@code {
    internal static object TopbarSection = new();
}

MainLayout 구성 요소의 Razor 태그에서 구성 요소를 배치 SectionOutlet 하고 매개 변수에 TopbarSection 전달 SectionId 하여 섹션을 나타냅니다.

<SectionOutlet SectionId="TopbarSection" />

SectionContent 증분 개수 단추를 렌더링하는 구성 요소를 앱의 Counter 구성 요소에 추가합니다. 구성 요소의 MainLayoutTopbarSection 섹션 정적 object 을 SectionId (MainLayout.TopbarSection)로 사용합니다.

Counter.razor의 경우

<SectionContent SectionId="MainLayout.TopbarSection">
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</SectionContent>

구성 요소에 Counter 액세스 MainLayout 하면 구성 요소는 구성 요소가 배치되는 SectionOutlet 증분 개수 단추를 렌더링합니다.

참고 항목

SectionOutlet 및 SectionContent 구성 요소는 둘 다 SectionIdSectionName설정할 수 없거나 둘 다 설정할 수 없습니다.

RenderFragment 캐싱 규칙 및 섹션 렌더링 동작

SectionContent렌더링되는 구성 요소와 다른 인스턴스인 '의 RenderFragment 콘텐츠가 변경되면 Blazor 섹션의 콘텐츠를 업데이트하는 대신 섹션을 완전히 삭제하고 다시 만듭니다. 일반 렌더링과 달리 섹션의 콘텐츠는 다른 인스턴스에서 제공될 수 있으며, 별도의 두 구성 요소에서 콘텐츠를 처리하는 것은 의미가 없으므로 예기치 않은 결과가 발생할 수 있습니다. 이 동작에 대한 자세한 설명은 SectionOutlet/SectionContent 및 CascadingValue(Blazor#58316)를 사용하여 일관성 없는 구성 요소 초기화를 dotnet/aspnetcore참조하세요.

다른 Blazor 기능과의 섹션 상호 작용

섹션은 다음과 같은 방법으로 다른 Blazor 기능과 상호 작용합니다.

  • 계단식 값 은 구성 요소에 의해 SectionContent 콘텐츠가 정의된 섹션 콘텐츠로 흐릅니다.
  • 처리되지 않은 예외는 구성 요소 주위에 정의된 오류 경계처리됩니다.
  • Razor 스트리밍 렌더링을 위해 구성된 구성 요소는 스트리밍 렌더링을 사용하도록 구성 요소에서 제공하는 SectionContent 섹션 콘텐츠도 구성합니다.
  • 대화형 구성 요소가 포함된 섹션은 페이지별/구성 요소 렌더링을 채택하는 레이아웃 구성 요소에서 Blazor Web App 정적으로 렌더링됩니다(작동하지 않음). 자세한 내용은 ASP.NET CoreBlazor 레이아웃을 참조하세요.
  • Last updated on