아래 스크린샷을 보면 메뉴 구성을 화면 크기에 따라 다르게 표시하는 경우가 많다
이런 경우 큰 화면에서 모든 메뉴가 보여지는 경우와 작은 화면에서 Dropdown 으로 표시되는 메뉴를 중복된 코드로 작성하면 비효율적이다.
메뉴 자체에 로직이 복잡하게 들어가거나 다른 페이지에서 재사용이 빈번한 경우라면 별도 Component 로 작성하면 되겠지만, 그렇지 않다면 굳이 Component 를 별도로 생성하는건 성능상 좋지 않다고 한다
Define reusable RenderFragments in code
By MSDN (View)
그래서 RenderFramement 를 코드 단에서 정의하고 재사용 하는 방법으로 작성했다
RenderFramement 를 코드 단에 다음과 같이 작성했다.
버튼에 대한 정보를 가지는 record 를 하나 정의 하고 해당 record 를 사용하는 RenderFragment 를 다음과 같이 추가했다
/// <summary>
/// Button information
/// </summary>
/// <param name="BsColor">Bootstrap color class</param>
/// <param name="BtnText">Button text</param>
record struct BtnInfo(string BsColor, string BtnText);
private RenderFragment<BtnInfo> Btn => btnInfo => __builder =>
{
<button type="button" class="btn btn-@(btnInfo.BsColor) p-1">
@btnInfo.BtnText
</button>
};
그리고 razor 구문에서 다음과 같이 사용하면 된다.
<div class="dropdown-menu dropdown-menu-end shadow p-1 actionmenu" style="min-width:auto">
<div class="vstack gap-1">
<div class="btn-group" role="group">
@Btn(new BtnInfo("outline-primary", "CollapseMenu1"))
@Btn(new BtnInfo("outline-danger", "CollapseMenu2"))
</div>
<div class="btn-group" role="group">
@Btn(new BtnInfo("outline-info", "CollapseMenu3"))
@Btn(new BtnInfo("outline-warning", "CollapseMenu4"))
</div>
</div>
</div>
<div class="btn-group menuExpand" role="group">
@Btn(new BtnInfo("outline-primary", "CollapseMenu1"))
@Btn(new BtnInfo("outline-danger", "CollapseMenu2"))
@Btn(new BtnInfo("outline-info", "CollapseMenu3"))
@Btn(new BtnInfo("outline-warning", "CollapseMenu4"))
</div>
전체 소스 코드는 다음 Github 코드 중에 RenderFragement 폴더를 참조하면 된다
0 Comments