React portal이란 무엇이며 언제 유용한가요?

Question

Accepted Answer

**portal**은 자식을 DOM의 **다른 위치**(부모의 DOM 계층 바깥)에 render하면서도 React의 컴포넌트 트리에는 유지합니다 — 그래서 context, props, 이벤트가 마치 정상적으로 중첩된 것처럼 여전히 동작합니다. ```jsx import { createPortal } from "react-dom"; function Modal({ children, onClose }) { // 끝의

에 render하며, // 을 호출한 컴포넌트 내부가 아님 return createPortal(

{children}

, document.getElementById("modal-root") ); } ``` ## 왜 필요한가 모달, 툴팁, 드롭다운, 토스트는 조상의 `overflow: hidden`이나 `z-index` 쌓임 컨텍스트를 **탈출**해야 합니다. 모달이 `overflow: hidden`을 가진 카드 깊숙이 중첩되어 있으면 잘려버립니다. portal을 통해 `body`에 render하면 이를 완전히 피할 수 있습니다. ## 이벤트는 여전히 React 트리를 따른다 이것이 미묘하면서도 강력한 부분입니다: 모달의 DOM이 `body` 아래에 있더라도, React 조상의 `onClick`은 여전히 발동합니다. **이벤트 버블링이 DOM 트리가 아니라 React 트리를 따르기** 때문입니다: ```jsx

{/* portal 내부 클릭에도 여전히 발동 */} ...

``` ## 접근성을 잊지 마세요 portal은 *위치 지정* 문제를 해결하지 *접근성(a11y)*을 해결하지는 않습니다. 다이얼로그에는 여전히 포커스 트래핑, `role="dialog"`/`aria-modal`, Escape로 닫기가 필요합니다(또는 이런 많은 부분을 처리해주는 네이티브 `