blazor의 전반적인 layout에 대하여 궁금합니다.

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1 
@inherits LayoutComponentBase

<PageTitle>Changed</PageTitle>

<div class="wrapper">

    <header class="common-header">

    </header>

    <main>
        <article class="class-main">
            @Body

        </article>
    </main>

    <footer class="common-footer">

    </footer>
</div>

이런식의 코드가 기본 구성인거 같습니다.
제 추측이 맞다면 <body> 태그가 아마 @body 로 대체되는거 같습니다.

새로운 .razor파일을 구성하게되면 안에 내용자체가 비어있는데, .razor파일을 만들자마자 무조건적으로 생성해야하는 코드가 뭐가 있을까요? 다른 코드들을 살펴보니 <div> 로 감싸놓고 @body
밑에다가 코드를 짜는식이던데 어떤식으로 코드를 구성하시나요?

2

그냥 쉽게 HTML 블럭으로 이해하시면 좋습니다. 동적인 요소가 없다면 그냥 HTML 태그로만 구성하셔도 됩니다. 동적인 요소가 있다면 일반적으로

@* 컴포넌트가 페이지일 경우 라우터 경로를 표현할 수 있습니다. *@
@page "/"
@* 사용할 네임스페이스를 적어줍니다. 자주 쓰는 것은 `_Imports.razor`에 일괄 등록하면 편합니다 *@
@using Mapster

@* ComponentBase는 생략해도 됩니다. 생략할 경우 ComponentBase를 상속하게 됩니다.
ComponentBase를 상속받아 새로운 xxxComponentBase를 사용할 수도 있습니다. *@
@inherits ComponentBase
@* 개체를 주입할 수 있습니다.*@
@inject IJSRuntime JSRuntime
@* 제네릭 인자가 있을 경우 제네릭 유형을 표현할 수 있습니다. *@
@typeparam TValue


@{
// HTML 렌더링 전 렌더링 관련 사전 처리를 여기서 할 수 있습니다.
}

<tag>...</tag>

@code {
// 코드...
}
1개의 좋아요
3

Blazor Server 기준이 맞나요?
저도 요즘은 blazor WASM은 가물가물해서…

@dimohy 님께서 언급하신 대로 하시면 될 것 같습니다.

App.razor에서 @routeData 값을
Navlink등에서 받은 URI를 pages 상단에
@page "/" 등으로 표현한 경로에 일치하는게 있는지 확인 후

위에 언급하신 @body 부분에 해당 razor 파일을 렌더링합니다.
보통 저 @body는 app.razor에서 DefaultLayout 값으로 지정되는 레이아웃 파일에 들어있는 경우가 많지요.

이렇게 렌더링 된 페이지를 폴백 페이지인 _Host.cshtml과 _Layout.cshtml로 감싸게 되는 걸로 보입니다.
첨엔 그냥 오류라거나 이럴 때 쓰이는 페이지 같았는데,
css 격리를 사용 하지 않는 이상 범용 js 스크립트나 css는 _Host.cshtml에서 등록해서 쓰더라고요.

4

이 글을 참고하시면 좋습니다.

레이아웃은 한번 지정하면 바꿀 수 없는 것이 아니라 App.razor의 다음의 설정으로 인해 기본 레이아웃이 반경됩니다.

<... DefaultLayout="@typeof(MainLayout)" />

여러 레이아웃을 구성할 수 있고 대표적으로 사용자 화면 레이아웃과 관리자 화면 레이아웃이 그렇습니다.

레이아웃을 페이지에 직접 적용하려면 다음과 같이 합니다.

@page "/Admin"
@* 관리자 화면의 레이아웃 적용 *@
@layout AdminLayout
2개의 좋아요
5

살짝 용어적 혼동이 있는 것 같습니다.

레이저 컴포넌트에는 일반 컴포넌트와 레이아웃 컴포넌트가 있습니다.

.razor 파일은 기본적으로 컴포넌트로 취급됩니다.
참고로, .cshtml 파일은 레이저 페이지로 취급됩니다.

.razor 파일이 아래와 같이 명시적으로 레이아웃 컴포넌트를 파생하면,

@inherits LayoutComponentBase

이 파일은 레이아웃 컴포넌트(의 파생 클래스)로 취급됩니다.

레이아웃은 일반 컴포넌트와 다른데, 이름처럼 레이아웃을 제공하기 위한 것입니다. MVC나 레이저 페이지에서 _Layout.cshtml 과 유사합니다.

질문의 요지가 일반 컴포넌트를 작성할 때, 자주 쓰는 외형(레이아웃)적 특징을 묻는 것이라면, @dimohy 님의 첫 번째 댓글의 형식처럼 하는 것이 일반적이고, "레이아웃 컴포넌트"에 관한 묻는 것이라면, 질문의 코드가 일반적입니다.

레이아웃 컴포넌트는 RenderFragment? 형식의 Body 속성을 가지고 있는데, 이를 뷰에 나타내기 위해서는 @Body 와 같은 레이저 마크를 써야합니다. 이 속성은 레이아웃의 바디 부분에 보여질 요소를 의미하는 것이지, <body> 태그와는 상관이 없습니다.

렌더링된 html 파일의 바디 태그는 _Host.cshtml 에 위치해 있습니다.

3개의 좋아요
6

제일 잘 설명해주신 것 같네요!
RenderFragment 이런걸 어떻게 말씀드려야 할 지 고민했었는데 ㅠㅠ 시원하게 해주셔서 감사드립니다.

1개의 좋아요