SPA 구조, Router

🏄‍♀️ SPA(Single Page Application)

✅ SPA란?

• SPA는 Single Page Application의 약자로, 기존의 정적 페이지처럼 매번 새 페이지를 로딩하는 방식이 아닌,
• DOM의 일부분만 갱신하여 동적으로 콘텐츠를 보여주는 방식입니다.
• Blazor의 SPA는 JavaScript를 사용하지 않고도 .razor 파일과 .NET 코드만으로 구현됩니다.

예전 웹에서는 버튼 하나 눌러도 전체 HTML을 다시 받아왔지만, SPA는 필요한 부분만 갱신함으로써 성능과 UX를 향상시킵니다.

---

🧱 Layout 구조

Blazor에서 레이아웃은 공통 UI(메뉴, 헤더 등)를 재사용하는 방식으로 제공됩니다.

▶ 기본 Layout 구성 (MainLayout.razor)

@inherits LayoutComponentBase

<div class="sidebar">
    <p style="color : #be0000;">a</p>
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">c
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

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

• @Body는 해당 Layout에 표시될 페이지 콘텐츠를 삽입하는 자리입니다.
• @inherits LayoutComponentBase는 해당 컴포넌트가 Layout이라는 것을 명시합니다.

---

▶ Layout 적용 방식

• 각 페이지(.razor)에서 개별로 설정: @layout MainLayout2
• 폴더 전체에 적용: _Imports.razor에 @layout MainLayout2 작성
• 전체 앱 기본 Layout 지정: App.razor에서 DefaultLayout="@typeof(MainLayout)"

---

🧭 Router 구조

▶ App.razor 내 기본 라우터 설정

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

• Found: URL이 일치할 때 보여줄 컴포넌트
• NotFound: 없는 주소 요청 시 보여줄 컴포넌트
• DefaultLayout: 해당 라우터의 기본 레이아웃 지정

Blazor의 라우터는 내부적으로도 RenderFragment를 사용하여 렌더링 로직을 구현합니다.

---

🎮 NavMenu와 Navigation

▶ NavLink와 href

NavMenu.razor에 존재하는 메뉴는 다음과 같이 구성됩니다:

<NavLink class="nav-link" href="counter">
    <span class="oi oi-plus"></span> Counter
</NavLink>

• NavLink는 href와 유사하지만, 현재 선택된 경로에 대한 스타일 지정 기능이 추가됩니다.
• 내부적으로 Blazor의 라우팅 상태를 추적합니다.

▶ NavigationManager 사용 예시

@inject NavigationManager navManager

<button class="btn btn-primary" @onclick="GoToFetchData">Go</button>

@code {
    private void GoToFetchData()
    {
        navManager.NavigateTo("fetchdata");
    }
}

• C# 코드에서 직접 경로 이동을 수행할 수 있습니다.

---

📬 URL 파라미터 받기

라우팅 경로에 파라미터를 포함할 수 있습니다.

▶ Counter.razor 예시

@page "/counter"
@page "/counter/{CurrentCount:int}"

@code {
    [Parameter]
    public int CurrentCount { get; set; }

    private void IncrementCount() => CurrentCount++;
}

• /counter/30으로 접근하면 CurrentCount에 30이 전달됩니다.
• 라우팅 규칙에서 파라미터 타입 제한도 가능합니다 (:int, :string 등)

---