렌더링 모드

Grunfeld는 두 가지 렌더링 모드를 지원합니다: inline과 top-layer. 각 모드는 서로 다른 장단점을 가지고 있습니다.

Inline 모드 (기본값)#

z-index 기반의 전통적인 렌더링 방식입니다:

• 모든 모던 브라우저 지원 (IE11+)
• 완전한 스타일 커스터마이징
• 예측 가능한 동작
• JavaScript 기반 ESC 키 처리

이 모드는 가장 안정적이며 넓은 브라우저 지원을 제공합니다. 대부분의 경우 이 모드를 사용하는 것을 권장합니다.

grunfeld.add(() => ({
  element: <MyDialog />,
  renderMode: "inline", // default
}));

Top-layer 모드#

HTML5 <dialog> 요소를 사용하는 네이티브 방식입니다:

• z-index 충돌 없음
• 브라우저 네이티브 ESC 키 처리
• 더 나은 접근성
• 최신 브라우저만 지원 (Chrome 37+, Firefox 98+, Safari 15.4+)

<dialog> 요소는 자동으로 최상위 레이어에 렌더링되므로, 다른 요소의 z-index에 영향받지 않습니다.

grunfeld.add(() => ({
  element: <MyDialog />,
  renderMode: "top-layer",
}));

브라우저 호환성#

각 모드의 브라우저 지원:

Inline mode:
- Chrome: All versions
- Firefox: All versions
- Safari: All versions
- Edge: All versions
- IE: 11+

Top-layer mode:
- Chrome: 37+
- Firefox: 98+
- Safari: 15.4+
- Edge: 79+

프로젝트의 타겟 브라우저에 따라 적절한 모드를 선택하세요.

모드 전환#

개별 대화상자마다 다른 렌더링 모드를 사용할 수 있습니다:

// Use top-layer only for some dialogs
grunfeld.add(() => ({
  element: <CriticalModal />,
  renderMode: "top-layer",
}));

grunfeld.add(() => ({
  element: <RegularModal />,
  renderMode: "inline",
}));

일반적으로 프로젝트 전체에 걸쳐 하나의 모드를 일관되게 사용하는 것을 권장합니다.