Blazor

이 페이지는 개인적으로 프로젝트를 진행하며 얻은 경험들을 두서없이 기술한 페이지이다.

Blazor 관련 정리

블레이저 라이프 사이클

OnInitialized → OnParametersSet → OnAfterRender

블레이저 구조

블레이저는 ASP.NET 의 기본 구성에서 발전되었다.

블레이저는 컴포넌트들의 조합으로 구성된다.

컴포넌트 상속 관계

블레이저 컴포넌트는 razor 파일로 구성된다.

razor 파일은 cs 파일과 cshtml 파일로 구성된다.

cs 파일은 code behind 영역을 담당하며 cshtml 은 레이아웃을 담당한다.

페이지 호출 상속 관계

페이지가 호출 되면 가장 먼저 cshtml 이 드로잉 된다.

cshtml 내부의 레이아웃 컴포넌트가 드로잉 된다.

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

레이아웃 컴포넌트 내부의 Body 가 드로잉 된다.

@Body

Body 는 해당 레이아웃 컴포넌트를 호출한 razor 파일을 드로잉 한다.

@page "/sample"
@layout SampleLayout

유용한 내용

Javascript 의 document.ready 를 사용하려면 OnAfterRenderAsync 에서 javascript 를 호출해줘야 한다.

window.Ready = () => {
    console.log("document is ready");
}

[Inject]
IJSRuntime JSRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{   
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("Ready");
    }   
}

[Inject]
public NavigationManager NavigationManagerRef { get; set; }

protected void GoToPage(){
    NavigationManagerRef.NavigateTo("url string");
}

[Inject]
IJSRuntime JSRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender){
        await JSRuntime.InvokeVoidAsync("OnInitialized");
    }
}