심층 Blazor — 수명 주기 메서드 없이 Blazor 구성 요소 만들기

오랜만에 블로그 글을 쓰게 되었습니다. 직장에서 매우 어려운 Blazor 프로젝트를 시작하면서 내 생각을 커뮤니티와 공유할 시간이 없었습니다. 돌아와서 기뻐요!!.

이 블로그 게시물에서는 수명 주기 메서드와 면도기 파일 구문 없이 Blazor 구성 요소를 만든 방법을 공유할 것입니다. 우리는 이것을 클래스 전용 구성 요소 접근 방식이라고 말할 수 있지만 수명 주기 메서드는 없습니다. 많은 분들이 이러한 컴포넌트 렌더링 방식을 알고 계셨겠지만, 이 방법을 공유하면 모르는 다른 사람들에게 도움이 될 것 같았습니다. Blazor 소스 코드에 사용된 다양한 구성 요소를 검토한 후에 이 접근 방식을 찾았습니다.

이 접근 방식을 시연하기 위해 간단한 Rating 구성 요소를 만들 것입니다.

Rating.cs라는 클래스를 만들고 있습니다. 앞에서 언급했듯이 이것은 클래스 전용 구성 요소이므로 Razor 구성 요소 항목을 생성하지 않습니다.

public class Rating
{
}

이 접근 방식의 첫 번째 단계는 IComponent 인터페이스로 Rating 클래스를 구현하는 것입니다.

public class Rating : IComponent
{
}

이제 Rating 클래스는 IComponent 인터페이스의 두 가지 메서드를 구현해야 합니다.

연결 — RenderHandle 인스턴스를 평가 구성 요소에 연결합니다.

SetParametersAsync — 구성 요소 매개 변수를 설정합니다. 예, 이전에 거짓말을 했습니다. 이 수명 주기 방법이 필요합니다. 그러나 나는 이것이 필요한 유일한 것이라고 약속합니다. 더 이상 추가하지 않겠습니다.

Attach 메서드에서 나중에 사용할 수 있도록 RenderHandle 인스턴스를 가져와서 저장해야 합니다. 이제 코드는 아래와 같습니다.

public class Rating : IComponent
{
     private RenderHandle _renderHandle;     

     void IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
}

이제 SetParametersAsync 메서드를 처리해야 합니다. 이 메서드는 아래 두 가지 중요한 책임을 처리해야 합니다.

ParameterView에서 구성 요소 매개 변수를 가져오고 해당 구성 요소 속성에서 설정합니다. 여기서 Rating 구성 요소는 Value 속성을 사용합니다.

RenderFragment 대리자를 사용하여 RenderHandle의 Render 메서드를 호출합니다.

이제 최종 평가 구성 요소는 아래와 같습니다.

    public class Rating : IComponent
    {
        private RenderHandle _renderHandle;        

        [Parameter]
        public int Value { get; set; }        

        void IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        {
            foreach(var entry in parameters)
            {
                switch (entry.Name)
                {
                    case nameof(Value):
                        Value = (int)entry.Value;
                        break;
                }
            }
            _renderHandle.Render(RenderDelegate);                         
            return Task.CompletedTask;
        }        

        private void RenderDelegate(RenderTreeBuilder builder)
        {
            int max = Math.Min(Value, 5);
            int seq = 1;
            for (var i = 0; i < max; i++)
            {
                builder.OpenElement(seq++, "span");
                builder.AddAttribute(seq++, 
                          "style", "color:#f49813;font-size:30px");
                builder.AddContent(seq++, "★");
                builder.CloseElement();
            }
        }
    }

이제 Rating 구성 요소는 아래와 같이 간단하게 응용 프로그램에서 사용할 수 있습니다.


출력은 아래와 같습니다.

폐쇄

Blazor 구성 요소를 만드는 여러 방법 중 하나를 배웠기를 바랍니다. 이 게시물에서 나는 이것을 최선의 접근 방식으로 권장하지도 않고 성능 이점을 위해 이 접근 방식을 사용하도록 주장하지도 않습니다. 저는 이 접근 방식이 간단한 Blazor 구성 요소를 만드는 간단하고 깨끗한 방법이라는 것을 알았습니다.

이 게시물이 도움이 되었다면 댓글을 남기거나 이 게시물을 공유하세요. 행복한 코딩!!