레이아웃을 사용하여 재사용 가능한 Blazor 구성 요소 빌드

7분

Blazor에는 앱의 여러 페이지에 표시되는 일반적인 UI(사용자 인터페이스) 요소를 쉽게 코딩할 수 있는 레이아웃이 포함되어 있습니다.

피자 배달 회사의 웹 사이트에서 작업 중이며 대부분의 기본 페이지에 대한 콘텐츠를 Blazor 구성 요소 집합으로 만들었다고 가정합니다. 이러한 페이지에 동일한 브랜딩, 탐색 메뉴 및 바닥글 섹션이 있는지 확인하려고 합니다. 그러나 해당 코드를 복사하여 여러 파일에 붙여넣는 방법은 원하지 않습니다.

여기서는 Blazor에서 레이아웃 구성 요소를 사용하여 여러 페이지에서 공통 HTML을 렌더링하는 방법을 알아봅니다.

참고 항목

이 단원의 코드 블록은 예시입니다. 다음 단원에서는 직접 코드를 작성해 보세요.

Blazor 레이아웃이란 무엇인가요?

대부분의 웹 사이트에서 UI 요소의 배열은 여러 페이지에서 공유됩니다. 예를 들어, 페이지 맨 위에 브랜드 배너가 있고, 기본 사이트 탐색 링크가 왼쪽 아래에 있고, 맨 아래에 법적 고지 사항이 있을 수 있습니다. 이러한 공통 UI 요소를 한 페이지에 코딩한 후 다른 모든 페이지의 코드에 복사하여 붙여넣는 것은 번거롭습니다. 게다가, 나중에 연결할 사이트의 새 주요 섹션 또는 사이트 리브랜딩과 같은 변경 내용이 있는 경우 모든 개별 구성 요소에서 동일한 변경을 반복해야 합니다. 대신 레이아웃 구성 요소를 사용하여 공통 UI 요소를 단순화하고 재사용합니다.

Blazor의 레이아웃 구성 요소는 렌더링된 태그를 참조하는 모든 구성 요소와 해당 태그를 공유하는 구성 요소입니다. 레이아웃에 탐색 메뉴, 브랜딩, 바닥글과 같은 공통 UI 요소를 배치합니다. 그런 다음, 다른 여러 구성 요소에서 해당 레이아웃을 참조합니다. 페이지가 렌더링될 때 요청된 피자의 세부 정보 등 고유한 요소는 참조 구성 요소에서 제공됩니다. 그러나 일반적인 요소는 레이아웃에서 가져옵니다. 레이아웃에서 공통 UI 요소를 한 번만 코딩하면 됩니다. 그런 다음, 사이트를 리브랜딩하거나 다른 변경을 수행하려는 경우 레이아웃만 수정하면 됩니다. 변경 내용은 참조하는 모든 구성 요소에 자동으로 적용됩니다.

Blazor 레이아웃 코딩

Blazor 레이아웃은 특정 유형의 구성 요소이므로 Blazor 레이아웃을 작성하는 것은 앱에서 UI를 렌더링하는 다른 구성 요소를 작성하는 작업과 비슷합니다. 예를 들어, @code 블록 및 여러 지시문을 동일한 방식으로 사용합니다. 레이아웃은 .razor 확장명의 파일에 정의됩니다. 이 파일은 앱 내의 Shared 폴더에 저장되는 경우가 많지만 해당 파일을 사용하는 구성 요소에 액세스할 수 있는 어떤 위치에도 저장할 수 있습니다.

Blazor 레이아웃 구성 요소에 고유한 두 가지 요구 사항은 다음과 같습니다.

LayoutComponentBase 클래스를 상속해야 합니다.
참조하는 구성 요소의 콘텐츠를 렌더링할 위치에 @Body 지시문을 포함해야 합니다.

@inherits LayoutComponentBase

<header>
    <h1>Blazing Pizza</h1>
</header>

<nav>
    <a href="Pizzas">Browse Pizzas</a>
    <a href="Toppings">Browse Extra Toppings</a>
    <a href="FavoritePizzas">Tell us your favorite</a>
    <a href="Orders">Track Your Order</a>
</nav>

@Body

<footer>
    @new MarkdownString(TrademarkMessage)
</footer>

@code {
    public string TrademarkMessage { get; set; } = "All content is &copy; Blazing Pizzas 2021";
}

참고 항목

레이아웃 구성 요소는 요청을 직접 처리하지 않고 생성된 경로가 없어야 하므로 @page 지시문을 포함하지 않습니다. 대신 참조 구성 요소는 @page 지시문을 사용합니다.

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

Blazor 구성 요소에서 레이아웃 사용

다른 구성 요소의 레이아웃을 사용하려면 적용할 레이아웃의 이름으로 @layout 지시문을 추가합니다. 구성 요소의 HTML은 @Body 지시문의 위치에 렌더링됩니다.

@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

이 다이어그램에서는 구성 요소와 레이아웃을 결합하여 최종 HTML을 렌더링하는 방법을 보여줍니다.

구성 요소의 태그를 레이아웃의 태그와 결합하여 페이지에 대한 최종 HTML을 만드는 방법을 보여주는 다이어그램.

폴더의 모든 Blazor 구성 요소에 템플릿을 적용하려는 경우 바로 가기로 _Imports.razor 파일을 사용할 수 있습니다. Blazor 컴파일러는 이 파일을 찾을 때 폴더의 모든 구성 요소에 해당 지시문을 자동으로 포함합니다. 이 기술은 모든 구성 요소에 @layout 지시문을 추가할 필요를 없애며 _Imports.razor 파일과 동일한 폴더 및 모든 하위 폴더에 있는 구성 요소에 적용됩니다.

중요

프로젝트의 루트 폴더에 있는 _Imports.razor 파일에 @layout 지시문을 추가하지 마세요. 이로 인해 레이아웃에 무한 루프가 발생하기 때문입니다.

웹앱의 모든 폴더에 있는 모든 구성 요소에 기본 레이아웃을 적용하려는 경우 단원 2에서 배운 대로 라우터 구성 요소를 구성하는 App.razor 구성 요소에서 이 작업을 수행할 수 있습니다. <RouteView> 태그에서 DefaultLayout 특성을 사용합니다.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

자체 @layout 지시문 또는 _Imports.razor 파일에 레이아웃이 지정된 구성 요소는 이 기본 레이아웃 설정을 재정의합니다.

레이아웃을 사용하여 재사용 가능한 Blazor 구성 요소 빌드

Blazor 레이아웃이란 무엇인가요?

Blazor 레이아웃 코딩

Blazor 구성 요소에서 레이아웃 사용

지식 점검

피드백