연습 - Blazor 레이아웃을 추가하여 코드에서 중복 줄이기

4분

Blazing Pizza 앱에 페이지를 추가했으니 탐색 HTML을 복사한다는 것을 알 수 있습니다. Blazor는 다음과 같은 종류의 페이지 스캐폴딩을 한 곳에서 만들 수 있도록 지원합니다. 이를 Blazor 레이아웃이라고 합니다.

이제 여러 페이지에 중복된 HTML이 많이 있습니다. 다음으로, 탐색 및 회사 정보를 한 곳에서 추가할 수 있도록 전체 앱에 대한 레이아웃을 만듭니다.

이 연습에서는 MainLayout 구성 요소를 만듭니다. 특정 페이지에 이 레이아웃을 사용한 다음 전체 앱의 기본 레이아웃으로 만드는 방법을 살펴봅니다.

MainLayout 구성 요소 추가

Visual Studio Code의 메뉴에서 파일>새 텍스트 파일을 선택합니다.
언어는 ASP.NET Razor를 선택합니다.

레이아웃 구성 요소를 만들고 모든 페이지에서 탐색 HTML을 복사합니다.

@inherits LayoutComponentBase

<div id="app">

  <header class="top-bar">
    <a class="logo" href="">
      <img src="img/logo.svg" />
    </a>

    <NavLink href="" class="nav-tab" Match="NavLinkMatch.All">
      <img src="img/pizza-slice.svg" />
      <div>Get Pizza</div>
    </NavLink>

    <NavLink href="myorders" class="nav-tab">
      <img src="img/bike.svg" />
      <div>My Orders</div>
    </NavLink>
  </header>

  <div class="content">
    @Body
  </div>

  <footer>
    &copy; Blazing Pizza @DateTime.UtcNow.Year
  </footer>

</div>

이 레이아웃은 _Host.cshtml의 태그를 일부 사용하므로 해당 위치에서 제거해야 합니다.

Ctrl+S를 선택하여 변경 내용을 저장합니다.
파일 이름에 MainLayout.razor를 사용합니다. 공유 디렉터리에 파일을 저장해야 합니다.
파일 탐색기에서 페이지를 확장합니다. 그런 다음, _Host.cshtml을 선택합니다.

Blazor 앱 구성 요소 주위의 요소를 다음 코드에서

<div id="app">
    <div class="content">
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </div>
</div>

다음 코드로 변경합니다.

<component type="typeof(App)" render-mode="ServerPrerendered" />

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

파일 탐색기에서 페이지를 확장합니다. 그런 다음, Index.razor를 선택합니다.
top-bar div 요소를 삭제하고 @page 지시문 아래에 새 레이아웃에 대한 참조를 추가합니다.
```
@layout MainLayout
```
이전 <h1>Blazing Pizzas</h1> 요소도 삭제하겠습니다. 레이아웃에 위쪽 막대가 있으므로 이 요소가 더 이상 필요하지 않습니다.
Visual Studio Code에서 F5 키를 선택합니다. 또는 실행 메뉴에서 디버깅 시작을 선택합니다.

새 홈페이지에는 자동으로 업데이트되는 올해 저작권 바닥글이 있습니다. 이 레이아웃을 사용하지 않는 페이지의 모양을 확인하려면 내 주문을 선택합니다. 또는 (http://localhost:5000/help) 같은 잘못된 페이지로 이동합니다. 현재 404 페이지를 찾을 수 없음에 브랜딩을 적용하지 않았습니다.
앱을 중지하려면 Shift + F5를 선택합니다.

모든 페이지를 새 레이아웃으로 업데이트

이제 앱의 모든 페이지에 @layout MainLayout 지시문을 추가할 수 있지만 Blazor에는 더 나은 솔루션이 있습니다. 먼저 Index.razor에 방금 추가된 레이아웃 지시문을 삭제합니다.

Index.razor 구성 요소에서 @layout MainLayout을 삭제합니다.
파일 탐색기에서 페이지를 확장합니다. 그런 다음, MyOrders.razor를 선택합니다.
top-bar div 요소를 삭제합니다.
파일 탐색기에서 페이지를 확장합니다. 그런 다음, OrderDetail.razor를 선택합니다.
top-bar div 요소를 삭제합니다.
파일 탐색기에서 페이지를 확장합니다. 그런 다음, Checkout.razor를 선택합니다.
top-bar div 요소를 삭제합니다.

App.razor 구성 요소는 페이지를 라우팅하는 방법을 변경할 수 있는 곳이지만, Blazor에 기본 레이아웃을 사용하도록 지시할 수도 있습니다.

파일 탐색기에서 App.razor를 선택합니다.
DefaultLayout="typeof(MainLayout)" 선언을 RouteView 요소에 추가합니다.
Layout="typeof(MainLayout)"를 LayoutView에 추가합니다.

이제 App.razor는 다음 예제와 같습니다.

<Router AppAssembly="typeof(Program).Assembly" Context="routeData">
    <Found>
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(MainLayout)">
            <div class="main">Sorry, there's nothing at this address.</div>
        </LayoutView>
    </NotFound>
</Router>

새 레이아웃 테스트

Visual Studio Code에서 F5 키를 선택합니다. 또는 실행 메뉴에서 디버깅 시작을 선택합니다.

기본 레이아웃을 사용하는 이점은 모든 페이지에 적용할 수 있고 찾을 수 없는 페이지의 레이아웃 뷰에 사용할 수 있다는 것입니다.
앱을 중지하려면 Shift + F5를 선택합니다.

앱에 대해 수행해야 하는 작업은 이 모듈에서 완료되었습니다. 양식 및 유효성 검사를 처리하는 방법을 확인하려면 이 학습 경로의 다음 모듈을 완료하세요.

연습 - Blazor 레이아웃을 추가하여 코드에서 중복 줄이기

MainLayout 구성 요소 추가

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

모든 페이지를 새 레이아웃으로 업데이트

새 레이아웃 테스트

피드백