C# Blazor RenderFragment 사용하기

C# Blazor RenderFragment 사용하기

 

RenderFragment를 이용정의하여 Component 를 만들어 RenderFragment 선언한곳에 다른 Content 나 Component 를 설정할 수 있습니다.

아래처럼 RenderFragment 를 선언해주고 RenderFragment 가 표시될 영역을 잡아줍니다.

@page "/renderfragmenttest"
<h3>RenderFragmentTest</h3>

<div class="card w-25" style="margin-bottom:15px">
    <div class="card-header font-weight-bold">Child content</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

위 코드에서 볼수 있듯이 <div class="card-body">@ChildContent</div> 영역에 표시되도록 처리가 된 상태입니다.

이를 아래처럼 사용하게되면

<RenderFragmentTest>
    <p>RenderFragmentTest</p>
</RenderFragmentTest>

 <p>RenderFragmentTest</p> 태그영역이 RenderFragment 영역에 표시됩니다.

결과

이렇게 사용하게되면 조건에 따라 RenderFragment 영역의 내용을 바꿀수 있습니다.

<RenderFragmentTest>
    <p>
    @if (type == "A")
    {
        <ChildA/>
    }
    else
    {
        <ChildB/>
    }
    </p>
</RenderFragmentTest>