Blazor에서 구성 요소 로드 처리
Blazor는 정말 훌륭합니다. 특히 상자 로드와 같은 비동기 작업을 수행할 때 보기에도 좋습니다.
저는 페이지, 상태, 구성 요소 등의 로딩을 처리하는 방법에 대해 여러 가지 방법을 시도해 왔습니다. 그리고 마침내 제가 원하는 방식으로 수행할 수 있는 완벽한 방법을 찾은 것 같습니다.
아이디어
각 페이지나 구성 요소에 로드하기 위한 논리를 다시 작성하는 대신 ChildComponent를 사용하여 상위 구성 요소를 빌드하면 여러 번 재사용할 수 있는 변경 사항이 제공됩니다.
LoadingComponent 코드
코드는 매우 간단합니다. 할 일이 그리 많지 않습니다. 로딩 속성이 있는 기본 if, 내부에 토글 기능이 있으면 완료됩니다!
@if (_loaded)
{
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</div>
}
else
{
@ChildContent
}
@code {
private bool _loaded = true;
[Parameter]
public RenderFragment? ChildContent { get; set; }
public void ToggleLoad(bool state)
{
_loaded = state;
}
}
사용법
사용법은 매우 간단합니다. 테스트를 위해 새 페이지를 사용하고 방금 생성한 LoadingComponent 구성 요소에 콘텐츠를 넣을 것입니다.
@page "/loading"
@using LoadingBoxes.Components
<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
This is some content
</LoadingBoxes.Components.LoadingComponent>
@code {
private LoadingComponent loadingComponent;
protected override async Task OnInitializedAsync()
{
// We are going to simulate some load
await Task.Delay(5000);
loadingComponent.ToggleLoad(false);
}
}
이렇게 생겼어요
더 재미있는 예
각각의 로딩 시간이 있는 여러 구성요소가 있다고 가정해 보겠습니다. 그에 따라 좋아 보이는 것을 만들 수 있습니다!
재사용할 수 있는 FakeLoadingComponent라는 가짜 로딩 구성 요소를 만들어 보겠습니다.
@using LoadingBoxes.Components
<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
It took @ellapsedTime seconds!
</LoadingBoxes.Components.LoadingComponent>
@code {
private LoadingComponent loadingComponent = new();
private int ellapsedTime = 0;
private Random rnd = new();
protected override async Task OnInitializedAsync()
{
var random = rnd.Next(0, 5000);
// We are going to simulate some load
await Task.Delay(random);
ellapsedTime = random/ 1000;
loadingComponent.ToggleLoad(false);
StateHasChanged();
}
}
그런 다음 Loading 페이지를 여러 FakeLoadingComponent 구성 요소로 업데이트하고 결과를 확인합니다!!
@page "/loading"
@using LoadingBoxes.Components
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
이제 이게 훨씬 좋아 보이는데
그리고 그게 다야!
문제나 질문이 있는 경우 소셜 미디어 @emimontesdeoca로 언제든지 저에게 연락해 주세요(Twitter에서는 실제로 @emimontesdeocaa이고 끝에 두 개의 aa가 있습니다). 블로그 헤더에서 내 소셜 미디어의 대부분을 찾을 수도 있습니다.
게시물이 마음에 드셨기를 바랍니다!