[Blazor] Virtualize 가상화 처리

Blazor에서 Virtualize (가상화 처리) 하는 방법입니다.

목록데이터를 표시할 때 양이 많은 경우 가상화 처리를 통해 메모리 사용을 줄일 수 있습니다.

Index.razor

@page "/"

<PageTitle>Cars</PageTitle>

@if (cars == null)
{
    <p><em>Loading cars...</em></p>
}
else
{
    <table class="table" height="800px">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
          @*@foreach (var car in cars)
            {
                <tr>
                  <td>@car.Id</td>
                  <td>@car.Name</td>
                  <td>@car.Cost</td>
                </tr>
            }*@
            
            <Virtualize Items="cars" Context="car" OverscanCount="5" ItemSize="15" SpacerElement="tr">
                <tr>
                    <td>@car.Id</td>
                    <td>@car.Name</td>
                    <td>@car.Cost</td>
                </tr>
            </Virtualize>
            
        </tbody>
    </table>
}

@code{
    private List<Car> cars;

    protected override async Task OnInitializedAsync()
    {
        cars = await MakeCars(1000);
    }

    private async Task<List<Car>> MakeCars(int count)
    {
        List<Car> myCarList = new List<Car>();

        for (int i = 0; i < count; i++)
        {
            var car = new Car()
                {
                    Id = Guid.NewGuid(),
                    Name = $"Car {i}",
                    Cost = i * Random.Shared.Next(50,100)
                };

            myCarList.Add(car);
        }
        return await Task.FromResult(myCarList);
    }


    public class Car
    {
        public Guid Id { get; set; }
        public string? Name { get; set; }
        public int Cost { get; set; }
    }
}

위 코드에서 보면 알 수 있듯이

아래의 코드를 

@foreach (var car in cars)
{
      <tr>
        <td>@car.Id</td>
        <td>@car.Name</td>
        <td>@car.Cost</td>
      </tr>
}

아래처럼 Virtualize를 사용하면 가상화 처리가 됩니다.

<Virtualize Items="cars" Context="car" OverscanCount="5" ItemSize="15" SpacerElement="tr">
    <tr>
        <td>@car.Id</td>
        <td>@car.Name</td>
        <td>@car.Cost</td>
    </tr>
</Virtualize>

개발자 도구를 통해 보면 모든 데이터가 표시되지 않고 스크롤될 때 일정양만 가지고 있는 것을 알 수 있습니다.

총 1000건이지만 일부 데이터만 가지고 있으며 스크롤할 때도 일부데이터만 가지고 표시되는 걸 확인할 수 있습니다.

 

소스
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.VirtualizationTest