[Blazor] ShouldRender - 불필요한 렌더링 방지

ShouldRender 는 화면에서 특정 조건인 경우에만 화면이 렌더링 될 필요가 있는 경우 사용하는 기능입니다.

아래처럼 return false 로 하게 되면 그 화면은 렌더링 되지 않습니다.

    protected override bool ShouldRender()
    {
        return false;
    }

return true 일때

return false 일 때

위 비교한 걸 보면 알 수 있지만 return false 로 한경우 Count 가 증가하지 않습니다.

이를 이용해 특정 조건인 경우 ShouldRender 를 이용해 렌더링 되지 않도록 하여 불필요한 렌더링을 줄일 수 있습니다.

아래는 count 가 2의 배수인 경우만 화면에 렌더링 되도록 처리한 결과입니다.

@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;
        }
    }
}