C# Blazor ShouldRender - 불필요한 렌더링 방지

C# Blazor ShouldRender - 불필요한 렌더링 방지

 

Blazor 의 ShouldRender 는 화면에서 불필요한 렌터링을 방지하여

사용자에게 불필요하게 변경된 내용을 화면에 표시되지 않아도 될때 사용할 수 있습니다.

사용방법은 간단합니다.

아래처럼 return false; 를 해주게되면 화면이 렌더링되지 않습니다.

protected override bool ShouldRender()
{
   return false;
}

기본으로 생성되는 Counter.razor 화면에서 버튼 클릭 시 숫자가 증가하게 되는데 

위처럼 처리하게되면 화면의 숫자가 증가하지 않습니다.

아래처럼 특정 조건인 경우 ShouldRender 를 이용하여 렌더링되지 않도록 할 수있습니다.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<button class="btn btn-primary" @onclick="IncrementCount">Click me (@currentCount)</button>

@code {

    [Parameter]
    public int Increment { get; set; } = 1;

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount += Increment;
    }

    protected override bool ShouldRender()
    {
        if(currentCount % 2 == 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

위처럼 짝수인 경우에만 증가된 숫자가 화면에 표시되게 할 수 있습니다.