<div id="readability-page-1" class="page"><div>
 <div id="SE-48e0ef1a-4b42-463a-88a0-f8b273542f29">
 모달, 툴팁, 드롭다운을 만들다 보면 이상한 벽에 부딪힙니다. 분명히 화면 한가운데에 떠야 할 모달이, 부모 요소에 가려지거나 잘려 보이는 거죠. 원인은 CSS이고, 해법은 Portal입니다. 이번 챕터에서 createPortal을 다룹니다.
​
​
문제 — 부모의 CSS가 자식을 가둔다
모달은 보통 컴포넌트 트리 깊은 곳에서 만들어집니다. 그런데 그 위 어딘가에 이런 CSS가 있으면 곤란해집니다.

 </div> <div id="SE-8467b4f8-bbe7-42fd-8c3b-ef6bfa3fc36c">
 .card {
 overflow: hidden; /* 자식이 이 영역을 벗어나면 잘린다 */
 position: relative; /* z-index의 기준이 된다 */
 transform: scale(1); /* 새 쌓임 맥락(stacking context)을 만든다 */
}
 </div> <div id="SE-06812511-a0f0-4f20-a405-5803d9a937aa">
 이런 부모 안에서 모달을 그리면, overflow: hidden에 잘리거나, 부모의 z-index에 갇혀 다른 요소 밑에 깔립니다. 모달은 화면 전체를 덮어야 하는데, 부모의 CSS 상자 안에 갇혀버리는 거죠. CSS만으로 이걸 풀려고 하면 z-index 전쟁이 시작됩니다.
​
근본 해법은 모달의 DOM을 그 부모 바깥, 보통 &lt;body&gt; 끝으로 빼는 것입니다. 부모의 CSS 상자에서 탈출하는 거죠. 그게 Portal이 하는 일입니다.

 </div> <div id="SE-c00a5e60-3139-44c6-b229-69269e221b0b">
 createPortal — 자식을 다른 DOM 위치에 그리기
 </div> <div id="SE-b1882cc2-40e9-42a1-a58f-5855ae823858">
 ​
createPortal(children, domNode)는 자식을 부모 컴포넌트의 DOM 위치가 아니라, 지정한 다른 DOM 노드 안에 그립니다. 'react-dom'에서 가져옵니다.

 </div> <div id="SE-d9bb3f4f-4a91-4330-9c2d-9d902e65f97f">
 import { createPortal } from 'react-dom';

type ModalProps = {
 isOpen: boolean;
 onClose: () =&gt; void;
 children: React.ReactNode;
};

function Modal({ isOpen, onClose, children }: ModalProps) {
 if (!isOpen) return null;

 return createPortal(
 // ↓ 이 JSX는…
 &lt;div className="overlay" onClick={onClose}&gt;
 &lt;div className="modal" onClick={(e) =&gt; e.stopPropagation()}&gt;
 {children}
 &lt;button onClick={onClose}&gt;닫기&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;,
 document.body, // ← 부모 트리가 아니라 여기(body 끝)에 그려진다
 );
}
 </div> <div id="SE-33aa79e3-1d1f-4441-bde8-42cfd9e89add">
 이제 Modal을 트리의 아무리 깊은 곳에서 렌더해도, 실제 DOM은 &lt;body&gt; 바로 밑에 붙습니다. 부모의 overflow: hidden도, z-index도 더 이상 모달을 가두지 못합니다. (document.body에 바로 그려도 되고, index.html에 &lt;div id="modal-root"&gt;를 따로 두고 거기에 그리는 방식도 흔합니다.)
 </div> <div id="SE-4f75aa38-c259-4c39-8a73-84949d493dda">
 function ProductCard() {
 const [open, setOpen] = useState(false);
 return (
 &lt;div className="card"&gt; {/* overflow: hidden이어도 */}
 &lt;button onClick={() =&gt; setOpen(true)}&gt;상세 보기&lt;/button&gt;
 &lt;Modal isOpen={open} onClose={() =&gt; setOpen(false)}&gt;
 &lt;h2&gt;상품 상세&lt;/h2&gt; {/* 모달은 card 밖, body에 그려져 안 잘린다 */}
 &lt;/Modal&gt;
 &lt;/div&gt;
 );
}
 </div> <div id="SE-c57e0a49-070d-4411-80f0-7d243306b9ad">
 핵심 — DOM 위치는 바뀌어도, React 트리 위치는 그대로
 </div> <div id="SE-1a344043-f7dd-4086-ab7e-3a819cd982d6">
 ​
여기가 Portal의 진짜 묘미이자 면접 포인트입니다. Portal은 실제 DOM에서의 위치만 바꿀 뿐, React 컴포넌트 트리에서의 위치는 그대로입니다. &lt;body&gt;에 그려졌어도, React 입장에서 Modal은 여전히 ProductCard의 자식입니다. 그래서 두 가지 중요한 결과가 따라옵니다.
​
​
① Context가 그대로 동작한다
Modal 안의 컴포넌트는 React 트리상 부모(ProductCard 쪽)의 Context를 그대로 읽습니다. DOM은 &lt;body&gt;에 있어도, useContext는 React 트리를 따라 값을 찾으니까요. 그래서 테마·로그인 정보 같은 context가 모달 안에서도 문제없이 쓰입니다.
​
​
② 이벤트는 React 트리를 따라 버블링한다
이게 Portal에서 가장 헷갈리는 부분이자 면접 단골입니다. 이벤트는 (DOM 트리가 아니라) React 트리를 따라 버블링한다고 했죠. Portal에서 그 차이가 극적으로 드러납니다. 전체 코드로 보겠습니다.

 </div> <div id="SE-c9d9db7c-5f59-493d-873a-2bac570ae259">
 import { useState } from 'react';
import { createPortal } from 'react-dom';

function Modal({ isOpen, children }: { isOpen: boolean; children: React.ReactNode }) {
 if (!isOpen) return null;
 // children을 &lt;body&gt; 끝에 그린다
 return createPortal(&lt;div className="overlay"&gt;{children}&lt;/div&gt;, document.body);
}

function ProductCard() {
 const [open, setOpen] = useState(false);

 return (
 &lt;div onClick={() =&gt; console.log('① 카드 div 클릭됨')}&gt;
 &lt;button onClick={() =&gt; setOpen(true)}&gt;상세 보기&lt;/button&gt;

 &lt;Modal isOpen={open}&gt;
 {/* 이 버튼은 DOM상 &lt;body&gt; 안에 그려진다 */}
 &lt;button onClick={() =&gt; console.log('② 모달 안 버튼 클릭됨')}&gt;
 모달 안 버튼
 &lt;/button&gt;
 &lt;/Modal&gt;
 &lt;/div&gt;
 );
}
 </div> <div id="SE-bb62f018-4fe8-4cf5-9c53-122da340fc83">
 "상세 보기"로 모달을 연 뒤 "모달 안 버튼"을 클릭하면, 콘솔에 두 줄이 찍힙니다.
 </div> <div id="SE-e4d49c94-6b10-49f2-9425-b212ffdbbe37">
 ② 모달 안 버튼 클릭됨
① 카드 div 클릭됨 ← 모달은 DOM상 body에 있는데도, 카드 div의 onClick이 호출된다!
 </div> <div id="SE-92b689b0-72be-418a-ab0e-f6e8701b667a">
 모달 버튼은 분명 &lt;body&gt; 안에 그려졌는데, 왜 카드 div의 클릭 핸들러까지 불릴까요? DOM 트리와 React 트리를 나란히 놓으면 답이 보입니다.
 </div> <div id="SE-16355812-8c02-4bc0-a638-a7a872f927b8">
 실제 DOM 트리 React 컴포넌트 트리
────────────────── ──────────────────
&lt;body&gt; &lt;ProductCard&gt;
 ├─ &lt;div id="root"&gt; └─ &lt;div onClick=①&gt;
 │ └─ &lt;div onClick=①&gt; ├─ &lt;button&gt;상세 보기&lt;/button&gt;
 │ └─ &lt;button&gt;상세 보기&lt;/button&gt; └─ &lt;Modal&gt; ← 여전히 카드의 자식!
 └─ &lt;div class="overlay"&gt; └─ &lt;button onClick=②&gt;
 └─ &lt;button onClick=②&gt; 모달 안 버튼
 모달 안 버튼
 ↑ DOM상으론 카드 div '밖'(#root의 형제)
 </div> <div id="SE-12684429-2596-49b6-9f85-02b913ca2ee8">
 DOM상으로 모달 버튼은 카드 div 바깥(#root의 형제)에 있습니다. 하지만 React 트리에서는 여전히 ProductCard div의 자손이죠. 이벤트는 React 트리를 따라 버블링하므로, 모달 버튼의 클릭이 카드 div의 onClick(①)까지 거슬러 올라가는 겁니다.
​
이걸 모르면 "모달은 분리돼 있는데 왜 카드 클릭이 같이 실행되지?" 하고 한참 헤맵니다. 막고 싶으면 e.stopPropagation()을 모달 쪽에서 호출하면 됩니다.

 </div> <div id="SE-876cc1c3-7f58-4afe-8bca-45b07e05ce54">
 &lt;button
 onClick={(e) =&gt; {
 e.stopPropagation(); // React 트리에서의 버블링을 여기서 멈춘다
 console.log('② 모달 안 버튼 클릭됨');
 }}
&gt;
 모달 안 버튼
&lt;/button&gt;
// 이제 "① 카드 div 클릭됨"은 찍히지 않는다
 </div> <div id="SE-4db0af4f-109c-4873-a24b-b6b98733dd1c">
 ​
한 가지 짚어둘 점. createPortal은 DOM 위치를 옮겨줄 뿐, 접근성 있는 모달을 자동으로 만들어주지는 않습니다. 제대로 된 모달이라면 추가로 필요합니다.
​
<ul><li>포커스 가둠(focus trap) — Tab이 모달 안에서만 순환하도록
</li><li>Escape로 닫기, 열릴 때 포커스 이동, 닫힐 때 원래 위치로 복귀
</li><li>role="dialog", aria-modal="true" 같은 ARIA 속성
</li></ul>​
이걸 직접 다 챙기긴 번거로우니, 실무에서는 브라우저 기본 &lt;dialog&gt; 요소를 쓰거나 Radix UI·react-aria 같은 접근성 라이브러리를 함께 씁니다. Portal은 그 토대(DOM 위치 탈출)를 제공할 뿐이라고 이해하면 됩니다.
​
​
면접 포인트 정리
<ul><li>Portal이란? createPortal(children, domNode)로 자식을 부모 DOM 바깥(보통 body)에 그리는 것. 부모의 overflow·z-index 제약을 탈출한다.
</li><li>언제 쓰나? 모달·툴팁·드롭다운처럼 부모 CSS 상자를 벗어나야 하는 UI.
</li><li>DOM은 밖인데 React 트리는? 그대로다. 그래서 Context가 동작하고, 이벤트는 React 트리를 따라 부모로 버블링한다(s2-04).
</li><li>접근성은? Portal은 위치만 옮긴다. 포커스 트랩·ARIA·Escape는 별도(또는 &lt;dialog&gt;/라이브러리).
</li></ul>
 </div> <div id="SE-a354efd3-5065-4590-9e70-e7591f1a3915">
 ​
<ul><li>createPortal(children, domNode)(react-dom)는 자식을 부모 DOM 바깥의 다른 노드에 그린다.
</li><li>주 용도는 부모의 overflow·z-index·쌓임 맥락을 탈출해야 하는 모달·툴팁·드롭다운이다.
</li><li>Portal은 실제 DOM 위치만 바꾸고, React 트리 위치는 그대로 둔다. 그래서:
<ul><li>Context가 정상 동작한다(14장).
</li><li>이벤트는 React 트리를 따라 버블링한다(s2-04). DOM이 body에 있어도 React 부모로 올라간다.
</li></ul></li><li>접근성 있는 모달은 Portal만으로 부족하다. 포커스 트랩·ARIA·Escape는 &lt;dialog&gt;나 라이브러리로 보강한다.
</li></ul>​
다음 챕터에서는 useImperativeHandle을 다룹니다. 자식 컴포넌트가 부모에게 "이 메서드를 직접 호출할 수 있게" 명령형 핸들을 노출하는, 드물지만 알아두면 유용한 도구입니다.

 </div> <div id="SE-a3d2a314-dab7-46da-8ae1-8f4f72433eec">
 ​
<ul><li>createPortal — React 공식 문서 (DOM 위치·이벤트 버블링; 확인: 2026-06-24)
</li><li>&lt;dialog&gt; 요소 — MDN (접근성 있는 모달; 확인: 2026-06-24)
</li></ul>
 </div> </div></div>

개발하는 기획자. 기획하는 개발자.

모달, 툴팁, 드롭다운을 만들다 보면 이상한 벽에 부딪힙니다. 분명히 화면 한가운데에 떠야 할 모달이, 부모 요소에 가려지거나 잘려 보이는 거죠. 원인은 CSS이고, 해법은 Portal입니다. 이번 챕터에서 createPortal을 다룹니다. 문제 — 부모의 CSS가 자식을 가둔다 모달은 보통 컴포넌트 트리 깊은 곳에서 만들어집니다. 그런데 그 위 어딘가에 이런 CSS가 있으면 곤란해집니다. 이런 부모 안에서 모달을 그리면, overflow: hidden에 잘리거나, 부모의 z-index에 갇혀 다른 요소 밑에 깔립니다. 모달은 화면 전체를 덮어야 하는데, 부모의 CSS 상자 안에 갇혀버리는 거죠. CSS만으로 이걸 풀려고 하면 z-index 전쟁이 시작됩니다. 근본 해법.......

Portal로 모달·툴팁 만들기 — DOM은 밖에, React 트리는 그대로

댓글