Portal
-
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를 관리..
-
React Portal에 대해 알아보기 (Feat. Next.js 예시)React 2024. 11. 16. 15:57
React를 사용하다 보면 컴포넌트 트리 구조 내에서 DOM 구조와 시각적인 표현이 일치하지 않는 상황을 마주할 때가 있습니다.이런 경우에 React Portal은 강력한 도구로 활용될 수 있습니다.이번 글에서는 React Portal의 작동 원리부터 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.1. React Portal이란 무엇인가?React Portal은 React 16부터 도입된 기능으로, 현재의 컴포넌트 계층 구조 밖의 DOM 노드로 자식을 렌더링 할 수 있게 해 줍니다.일반적으로 React 컴포넌트는 부모 컴포넌트의 DOM 노드 내에 렌더링 되지만, Portal을 사용하면 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있으면서, 그리하여 논리적으로는 기존의 컴포넌트 트리 구조를 유지할 ..