[Blazor] Layout

참고

• https://learn.microsoft.com/ko-kr/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0
• https://blazor-university.com/layouts/creating-a-blazor-layout/

개요

• Blazor Layout 에 대하여 학습 하고 정리 진행합니다.

Blazor Layout 만들기

• 페이지의 레이아웃 템플릿으로 사용하려는 콘텐츠는 LayoutComponentBase 클래스의 자손이어야 합니다.
• 페이지의 내용을 표시할 위치를 지정하려면 Body 속성 내용을 출력하기만 하면 됩니다.
• Razor 템플릿 또는 C# 코드로 정의된 Razor 구성 요소를 만듭니다.
• Razor 템플릿을 기반으로 하는 레이아웃 구성 요소는 일반 Razor 구성 요소와 마찬가지로 .razor 파일 확장자를 사용합니다.
• 레이아웃 구성 요소는 앱의 구성 요소 전체에서 공유되기 때문에 일반적으로 앱의 Shared 폴더에 배치됩니다.
• 그러나 레이아웃은 이를 사용하는 구성 요소에 액세스할 수 있는 곳이면 어디에나 배치할 수 있습니다.
• 예를 들어 레이아웃을 사용하는 구성 요소와 동일한 폴더에 레이아웃을 배치할 수 있습니다.
• LayoutComponentBase에서 구성 요소를 상속합니다. LayoutComponentBase는 레이아웃 내부에 렌더링된 콘텐츠의 Body 속성(RenderFragment 형식)을 정의합니다.
• Razor 구문 @Body를 사용하여 콘텐츠가 렌더링되는 위치를 레이아웃 태그에 지정합니다.
• Shared/DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Doctor Who™ Episode Database</h1>
</header>

<nav>
    <a href="masterlist">Master Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } = 
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/";
}

MainLayout 구성 요소

• Blazor 프로젝트 템플릿에서 만든 앱에서 MainLayout 구성 요소는 앱의 기본 레이아웃입니다.
• Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

• Blazor 의 CSS 격리 기능은 격리된 CSS 스타일을 MainLayout 구성 요소에 적용합니다.
• 규칙에 따라 스타일을 동일한 이름의 동반 스타일시트 Shared/MainLayout.razor.css 에 의해 제공됩니다.

Layout 적용

구성 요소에 레이아웃 적용

• @layoutRazor 지시문을 사용하져 @page 지시문을 포함하는 라우팅 가능한 Razor 구성 요소에 레이아웃을 적용합니다.
• 컴파일러는 @layout 을 LayoutAttribute 로 변환하고 구성 요소 클래스에 특성을 적용합니다.
• 다음 Episodes 구성 요소의 콘텐츠는 DoctorWhoLayout 의 @Body 위치에 삽입됩니다.
• Pages/Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h3>Episodes</h3>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

• 다음의 렌더링된 HTML 태그는 이전 DoctorWhoLayout 및 Episodes 구성 요소에 의해 생성됩니다.
• 관련된 두 가지 구성 요소에서 제공하는 콘텐츠에 초점을 맞추기 위해 관련되지 않은 태그는 표시되지 않습니다.

실행 결과