[Blazor] 부모 컴포넌트에서 자식 컴포넌트 주입 받기

개요

• Blazor 에서 부모 컴포넌트에서 자식 컴포넌트 자체를 주입받는 방법에 대해서 정리 진행합니다.

ChildContenr(자식 콘텐츠)

• Razor 구성 요소는 자식 콘텐츠를 RenderFragment 로 캡처하고 해당 콘텐츠를 구성 요소 렌더링의 일부로 렌더링 할 수 있습니다.
• 자식 콘텐츠를 캡처하려면 RenderFragment 형식의 구성 요소 매개 변수를 정의하고 이름을 ChildContent 로 지정하여 사용하면 됩니다.

ChildContentComponent.razor

<h1>Component with child content</h1>

<div>@ChildContent</div>

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

• 위와 같이 자식 컴포넌트인 ChildContentComponent.razor 코드를 작성하였습니다.
• 여기서 @code 영역에 public RenderFragment ChildContent 속성을 추가하였습니다.
• 해당 속성을 HTML 영역에 <div>@ChildContent</div> 와 같이 선언을 해주면, 부모 컴포넌트에서 자식 컴포넌트로 Content 자체를 넘겨줄 수 있습니다.
• 부모 컴포넌트 코드는 다음과 같습니다.

<ChildContentComponent>
    <ChildContent>
        <p>The time is @DateTime.Now</p>
    </ChildContent>
</ChildContentComponent>