Blazor에서 RenderFragment 활용하기

• 5/12/2024
• 3 minutes to read

Blazor의 RenderFragment는 UI를 동적으로 렌더링하기 위한 핵심 도구입니다. 이 안내서는 Demos/RenderFragmentDemo 폴더 구조로 프로젝트를 구성하여 RenderFragment와 ChildContent를 사용한 동적 콘텐츠를 생성하는 과정을 단계별로 안내하고, 그 주요 이점을 강조합니다.

1단계: 새로운 Blazor Server 프로젝트 만들기

1. 새 프로젝트 생성: Visual Studio에서 Blazor Server 프로젝트를 생성하고, 프로젝트 이름을 Hawaso로 지정합니다.
2. 프로젝트 유형 선택: Blazor Server App을 선택하여 시작합니다.

2단계: RenderFragment의 기본 개념

Components/Demos/RenderFragmentDemo 폴더에 SimpleFragment.razor 파일을 추가하고, 기본적인 RenderFragment를 구현합니다.

@page "/simple-fragment"
@{
    RenderFragment simpleFragment = @<p>Hello, World!</p>;
}

@simpleFragment

이 컴포넌트는 "Hello, World!"라는 단순한 파라그래프를 렌더링하는 기본 예시입니다.

3단계: 매개변수를 활용한 RenderFragment

매개변수를 활용해 인사를 출력하는 GreetingFragment를 구현해보겠습니다.

Components/Demos/RenderFragmentDemo 폴더에 GreetingFragment.razor 파일을 추가합니다.

@page "/greeting-fragment"
@{
    RenderFragment<string> greetingFragment = (name) => @<p>Hello, @name!</p>;
}

@greetingFragment("Blazor Enthusiast")

이 컴포넌트는 사용자 이름을 매개변수로 받아 "Hello, [name]!"을 출력하는 재사용 가능한 인사 컴포넌트입니다.

4단계: RenderFragment와 ChildContent의 조합

카드 컴포넌트의 내부에 동적 콘텐츠를 렌더링할 수 있도록 Card.razor 파일을 Components/Demos/RenderFragmentDemo 폴더에 추가합니다.

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

<div class="card">
    <div class="card-body">
        @ChildContent
    </div>
</div>

이후 Pages 폴더에 CardDemo.razor 파일을 생성하여 카드 컴포넌트를 사용해보세요.

@page "/card-demo"

<Card>
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some content inside a card component.</p>
</Card>

이를 통해 카드 컴포넌트에 동적 콘텐츠를 추가할 수 있습니다.

5단계: 다중 콘텐츠 영역

다중 콘텐츠 영역을 지원하는 탭 인터페이스를 만들기 위해, Components/Demos/RenderFragmentDemo 폴더에 Tabs.razor와 Tab.razor 파일을 추가합니다.

Tabs.razor:

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

<div class="tabs">
    @ChildContent
</div>

Tab.razor:

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

<div class="tab">
    <h3>@Name</h3>
    <div class="tab-content">
        @ChildContent
    </div>
</div>

그리고 Pages 폴더에 TabsDemo.razor 파일을 추가하여 탭 인터페이스를 테스트합니다.

@page "/tabs-demo"

<Tabs>
    <Tab Name="Home">
        <p>Welcome to the Home tab!</p>
    </Tab>
    <Tab Name="Settings">
        <p>Configure your settings here.</p>
    </Tab>
</Tabs>

마무리

Blazor의 RenderFragment와 ChildContent를 활용해 동적이고 유연한 UI를 구성할 수 있습니다. Demos/RenderFragmentDemo 폴더 구조를 사용해 다양한 예시를 단계별로 따라 하며, 프로젝트에서 재사용 가능한 컴포넌트를 설계하고 효율적인 UI 구조를 구축해보세요.