AntDesign의 Message 컴포넌트가 표시되지 않을 때
Blazor Web App 프로젝트(.NET 9.0 기준)에서 Ant Design Blazor를 사용할 경우, Message, Modal, Notification 등의 동적 팝업 요소가 제대로 렌더링되지 않는 문제가 자주 발생합니다. 이는 필요한 컨테이너 구성 요소가 누락되었기 때문입니다.
해결 방안: AntContainer 등록 및 정적 리소스 포함
동작하는 팝업을 위해서는 앱 진입점인 App.razor 파일에 <AntContainer />를 명시적으로 추가하고, 클라이언트와 서버 모두에서 AntDesign 서비스를 등록해야 합니다.
// Program.cs (서버 및 클라이언트 모두에서 수행)
builder.Services.AddAntDesign();
다음은 수정된 App.razor 예제입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<!-- Ant Design 스타일 로드 -->
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<link antblazor-css />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
<!-- AntDesign 전역 컨테이너 등록 -->
<AntContainer @rendermode="RenderMode.InteractiveAuto" />
</body>
</html>
왜 AntContainer가 필요한가?
AntContainer는Message,Modal등 런타임에 동적으로 생성되는 UI 요소를 렌더링하는 역할을 담당합니다.- 이 컴포넌트가 없으면, 메시지나 알림이 호출되어도 화면에 출력되지 않으며 오류 로그만 발생합니다.
@rendermode="InteractiveAuto"를 통해 상호작용 가능한 상태로 유지되도록 설정해야 정상 작동합니다.
Drawer 내부 컴포넌트의 상태 초기화 문제
Blazor에서는 기본적으로 컴포넌트 인스턴스가 재사용될 수 있기 때문에, Drawer 안에 포함된 폼이나 입력 컴포넌트(Add 등)가 이전 상태를 유지하는 현상이 발생할 수 있습니다. 이를 방지하고 매번 새로 초기화하려면 다음 방법을 사용하세요.
방법: @key 지시어를 통한 강제 리렌더링
컴포넌트에 @key 속성을 부여하면, 키 값이 변경될 때마다 Blazor는 기존 인스턴스를 파기하고 새로운 인스턴스를 생성합니다. 이를 활용해 Drawer 열릴 때마다 새 키를 할당하면 됩니다.
<Button Type="ButtonType.Primary" @onclick="OpenDrawer">열기</Button>
<Drawer Title="추가 폼"
Placement="DrawerPlacement.Right"
Closable="true"
@bind-Visible="isDrawerOpen"
OnClose="CloseDrawer">
@if (isDrawerOpen)
{
<AddForm @key="formKey" OnSaved="HandleSave" />
}
</Drawer>
@code {
private bool isDrawerOpen = false;
private Guid formKey = Guid.NewGuid();
private void OpenDrawer()
{
formKey = Guid.NewGuid(); // 새 키 생성 → AddForm 재초기화
isDrawerOpen = true;
}
private void CloseDrawer()
{
isDrawerOpen = false;
}
private void HandleSave()
{
isDrawerOpen = false; // 저장 후 닫기
}
}
핵심 설명
@key는 Blazor의 렌더링 차등 알고리즘에서 중요한 역할을 하며, 키가 다르면 동일한 타입이라도 다른 컴포넌트로 간주됩니다.@if (isDrawerOpen)조건은 Drawer가 열렸을 때만 컴포넌트를 마운트하도록 보장하여 불필요한 초기화를 막습니다.Guid.NewGuid()는 고유한 키를 생성하므로 충돌 없이 신뢰성 있게 리셋됩니다.