반응형
popover
-
Portal만 쓰시나요? HTML 표준 Dialog, Popover API 알아보기Tip 2025. 6. 7. 19:51
React를 개발하다 보면 대부분 Portal을 사용해서 모달이나 팝업을 구현합니다.오늘은 Portal이 아닌 HTML의 표준 요소인 Dialog, Popover API를 알아보고 Portal이 아니라 Dialog나 Popover를 사용하는 경우에 대해서도 알아보도록 하겠습니다.1. PortalPortal은 컴포넌트 트리 바깥으로 DOM 요소를 렌더링 할 수 있게 하는 기술입니다.React에서는 ReactDOM.createPortal로 구현합니다.주로 모달이나 팝업처럼 현재 DOM 계층과 독립적인 UI 레이어를 만들고 싶을 때 많이 사용합니다.z-index 이슈가 복잡한 경우모달이 부모 컴포넌트의 overflow나 transform 등에 영향을 받지 않게 하고 싶을 때레이아웃과 별도로 레이어 UI를 관리..