생성 주기

OnInit & OnInitAsync
구성 요소가 초기화될 때 실행되는 동기 및 비동기 이벤트.

OnInitialized 가 먼저 실행 되고, OnInitializedAsync 가 실행. 
구성 요소가 완전히 로드되면 실행. 
UI의 각 컨트롤이 초기화 이벤트 이후에 발생 하므로, 이 이벤트에서 데이터를 구성. 

@page "/LifeCycle"

<h1>초기화 동기 비동기 Demo</h1>
<hr />

@foreach (var item in evtType)
{
    @item
    <hr />
}

@functions{
        List<string> evtType = new List<string>();

    //동기 초기화
    protected override void OnInitialized()
    {
        evtType.Add("OnInitialized 호출.");
    }
    //비동기 초기화
    protected override async Task OnInitializedAsync()
    {
        evtType.Add("OnInitializedAsync 호출.");
        //비동기 함수 또는 이벤트에는 await 연산자를 명시
        await Task.Delay(1000);
    }
}

OnParametersSet & OnParametersSetAsync
구성 요소가 상위 구성 요소로부터 매개 변수를 수신할 때 매개 변수를 설정하는 동기 및 비동기 이벤트.

구성 요소가 초기화 된 후 OnParametersSet 와 OnParametersSetAsync 가 호출. 
새 매개 변수 또는 업데이트된 매개 변수를 다시 액세스 할 때마다 호출. 

<h1>매개 변수 설정 동기 비동기 Demo</h1>
<hr />

@foreach (var item in evtType)
{
    @item
    <hr />
}

@functions{
    List<string> evtType = new List<string>();

    protected override void OnParametersSet()
    {
        evtType.Add("OnParameterSet 호출.");
    }
    protected override async Task OnParametersSetAsync()
    {
        evtType.Add("OnParametersSetAsync 호출.");
        await Task.Delay(1000);
    }
}

OnAfterRender & OnAfterRenderAsync 
구성 요소 렌더링을 완료한 후에 호출되며, 이때 요소 및 구성 요소 참조가 채워집니다.  
렌더링된 DOM 요소에서 작동하는 타사 JavaScript 라이브러리 활성화와 같은  
추가 초기화 단계를 렌더링 된 콘텐츠로 수행하려면 이벤트에서 정의. 

<h1>구성 요소 렌더링 후 동기 비동기 Demo</h1>

<MatButton Raised="true" @onclick="OnClick">버튼</MatButton>
<hr />
@foreach (var item in evtType)
{
    @item
    <hr />
}

@functions{
    List<string> evtType = new List<string>();

    async Task OnClick()
    {
        await Task.Delay(1000);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            evtType.Add("OnAfterRender 초기 호출.");
        }
        else
        {
            evtType.Add("OnAfterRender 호출.");

        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            evtType.Add("OnAfterRenderAsync 초기 호출.");
        }
        else
        {
            evtType.Add("OnAfterRenderAsync 호출.");

        }

        await Task.Delay(1000);
    }
}

ShouldRender
UI 새로 고침을 표시하지 않으려면 ShouldRender를 재정의합니다. 구현에서 true를 반환하는 경우 UI가 새로 고쳐집니다. 

<h1>UI 새로 고침 표시 안 함 이벤트 Demo</h1>
<MatButton Raised="true" @onclick="OnClick">버튼</MatButton>
<hr />
@foreach (var item in evtType)
{
    @item
    <hr />
}
@functions{
    List<string> evtType = new List<string>();

    async Task OnClick()
    {
        await Task.Delay(1000);
    }

    protected override bool ShouldRender()
    {
        evtType.Add("UI 새로 고침 표시 호출.");
        //return false;
        return true;
    }
}

결과

OnInitialized 호출.
OnInitializedAsync 호출.
OnAfterRender 초기 호출.
OnAfterRenderAsync 초기 호출.
OnParameterSet 호출.
OnParametersSetAsync 호출.
UI 새로 고침 표시 호출.
OnAfterRender 호출.
OnAfterRenderAsync 호출.
UI 새로 고침 표시 호출.

 

StateHasChanged
구성 요소에 상태가 변경되었음을 알립니다. 해당하는 경우, StateHasChanged를 호출하면 구성 요소가 다시 렌더링됩니다.

UI재전송을 트리거 하기 위해 수동으로 호출할 수도 있습니다.
ShouldRender에서 반환된 값을 검토하여 UI 재전송 여부를 결정합니다.
구성 요소가 처음으로 렌더링 된 후에만 발생합니다.

@using System.Threading;

<h1>상태 변경 이벤트 Demo</h1>
<h1>@Count</h1>

<button @onclick=StartCountdown>Start Countdown</button>

@functions {
    private int Count { get; set; } = 10;

    void StartCountdown()
    {
        var timer = new Timer(new TimerCallback(_ =>
        {
            if (Count <= 0) return;
            Count--;

            // StateHasChanged 를 정의하지 않으면
            // Blazor가 상태 변경을 인식하지 못하고 UI를 새로 고치지 않음
            this.StateHasChanged();
        }), null, 1000, 1000);
    }
}

IDisposable
구성 요소가 IDisposable을 구현하는 경우 UI에서 구성 요소가 제거될 때 Dispose 메서드가 호출.