MudSelectExtended 로 가상화 처리하기

MudSelectExtended 로 가상화 처리하기

 

MudBlazor의 기본 MudSelect 컴포넌트는 편리하지만 가상화(Virtualization) 기능이 없어 데이터가 많아질수록 렌더링 속도가 느려지는 문제가 있습니다.
하지만 CodeBeam.MudBlazor.Extensions 라이브러리에 포함된 MudSelectExtended 를 사용하면 가상화 + 검색(SearchBox) 기능까지 지원해 대량 데이터도 매우 빠르게 렌더링할 수 있습니다.

가상화를 이용한 MudSelectExtended 사용법을 알아봅니다.

@page "/virtualized-list"
@using MudExtensions

<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
    <MudText Typo="Typo.h4" Class="mb-4">가상화 리스트 - 10,000건 데이터</MudText>
    
    <MudPaper Class="pa-4 mb-4">
        <MudText Typo="Typo.body1">
            총 항목 수: @items.Count
        </MudText>
        <MudText Typo="Typo.body2" Class="mt-2">
            가상화를 사용하여 대량의 데이터를 효율적으로 렌더링합니다.
        </MudText>
    </MudPaper>

    <MudPaper Class="pa-4" Style="height: 100px;">

        <MudSelectExtended T="DataItem"
                         ItemCollection="@items"
                         ToStringFunc="@(e => e?.Name)"
                         Dense="true"
                         SearchBox="true"
                         Virtualize="true">
        </MudSelectExtended>
    </MudPaper>
</MudContainer>

@code {
    private List<DataItem> items = new();

    protected override void OnInitialized()
    {
        // 10,000건의 데이터 생성
        items = GenerateData(10000);
    }

    private List<DataItem> GenerateData(int count)
    {
        var result = new List<DataItem>();
        var random = new Random();

        for (int i = 1; i <= count; i++)
        {
            result.Add(new DataItem
            {
                Id = i,
                Name = $"항목 {i}",
                Description = $"이것은 {i}번째 항목입니다. 가상화로 효율적으로 렌더링됩니다.",
                CreatedDate = DateTime.Now.AddDays(-random.Next(1, 365)),
                Status = random.Next(0, 3) switch
                {
                    0 => "활성",
                    1 => "대기",
                    _ => "완료"
                }
            });
        }

        return result;
    }

    public class DataItem
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public DateTime CreatedDate { get; set; }
        public string Status { get; set; } = string.Empty;
    }
}

결과

가상화 처리되어 항목데이터가 빠르게 표시됩니다.

SearchBox 를 활성화하면 데이터를 filtering 할 수 있습니다.

filtering 속도도 빠릅니다.

아래 옵션을 추가로 주면 팝업이 아래로 뜹니다.

PopoverClass="mud-popover-fixed"
AnchorOrigin="Origin.BottomCenter"
TransformOrigin="Origin.TopCenter"