[Blazor] RenderFragment 사용하기

RenderFragment  는 Component 안에 다른 Component 의 Content 설정할 수 있도록 하는것으로 Component 의 여는 태그와 닫는 태그 사이에 넣어 사용할 수 있습니다.

RenderFragmentTest.razor

@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; }
}

위처럼 ChildContent 를 정의 하고 사용하게되면 아래처럼 사용할수 있습니다.

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

결과

위를 응용하면 Component 내부 Component 를 임의로 바꾸어 사용할수 있습니다.
바꿀 razor 를 만듭니다.

Child1.razor

<h3>Child1</h3>
<button class="btn btn-primary">Child1</button>

@code {

}

Child2.razor

<h3>Child2</h3>
<button class="btn btn-primary" >Child2</button>

@code {

}

상황에 따라 Child1, Child2 가 보이도록 코딩합니다.

Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

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

<RenderFragmentTest>
    <p>
    @if (currentCount % 2 == 0)
    {
        <Child1/>
    }
    else
    {
        <Child2 />
    }
    </p>
</RenderFragmentTest>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

위 내용은 currentCount 값에 따른 Child1 과 Child2 가 변환 되는 예제입니다.

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.MSDocTest

GitHub - kei-soft/Blazor.AppTest