Portal은 DOM 배치와 React 트리에 어떤 영향을 주나요?

이렇게 답해 보세요 (핵심 답변)

Portal(createPortal)은 컴포넌트의 자식 엘리먼트를 부모의 실제 DOM 계층 밖의 별도 DOM 컨테이너(예: document.body 하단)에 렌더링하는 기능입니다. 부모 요소에 overflow: hidden이나 복잡한 쌓임 맥락(stacking context)이 걸려 있을 때도 모달, 다이얼로그, 툴팁이 잘리지 않고 화면 위에 표시되도록 할 때 주로 사용합니다. 이때 실제 물리적인 DOM 위치만 바뀔 뿐, 논리적인 React 트리에서의 부모·자식 관계는 유지되므로 Context 구독과 합성 이벤트 버블링은 기존 React 트리를 따라 그대로 동작합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 컴포넌트의 논리적인 상태·Context 소유권은 원래 위치에 유지하면서 물리적인 렌더링 위치만 분리할 수 있습니다.
2. Portal 내부에서 발생한 클릭 이벤트가 React 트리의 상위 부모 핸들러로 버블링될 수 있으므로 의도치 않은 전파가 없는지 확인해야 합니다.

면접에서 자주 하는 실수

Portal을 썼다고 해서 모달의 키보드 포커스 트랩, ESC 닫기, 열기 전 포커스 복원, ARIA 역할 같은 웹 접근성이 자동으로 해결되지는 않으므로 별도로 구현해야 합니다.