어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

<Portal>이란? _ 보통 모달을 많이 씀 본문

개발/🟦 React

<Portal>이란? _ 보통 모달을 많이 씀

비니_ 2025. 11. 26. 15:05
728x90

 

 

🔖 <Portal>은 “화면의 다른 곳에 렌더링하게 해주는 도구”

 

React의 Portal은 컴포넌트의 자식 요소를 현재 부모 DOM 위치가 아니라, DOM의 다른 위치에 렌더링하도록 해주는 기능

 

 

모달이 부모 요소 안에 그대로 렌더링되면 이런 문제 생김:

  • 부모 요소의 overflow: hidden 때문에 모달이 잘림
  • z-index 충돌
  • CSS 레이아웃 꼬임
  • 스크롤 제어 문제
<div id="root">
  <App>
    <Modal>   ← 여기 JSX 구조에 있지만

<body>
  <div id="portal-root">
    <div class="modal"> ← 실제 DOM은 여기 렌더링됨

 

 

Portal = 다른 방으로 순간 이동시켜주는 문 이라고 생각

ex) 내 방에서 모달을 띄우는 것 처럼 보이지만 거실에서 모달을 가져와서 띄움

 

🔖 정리

✔ <Portal>은 컴포넌트를 DOM의 다른 위치에 렌더링하는 기능
✔ 모달, 드롭다운, 툴팁 등 레이아웃 위로 뜨는 UI에서 필수
✔ React Portal 기능을 사용해 만든 커스텀 컴포넌트
✔ 그래서 <Modal> 안에 <Modal> 넣어도 서로 독립적으로 렌더링됨

728x90

'개발 > 🟦 React' 카테고리의 다른 글

useRef로 resize width 계산 후 class 넣기  (0) 2025.12.01
useFormik 값이 무얼 뜻하는지 backend에서 찾기 (서버 전송)  (0) 2025.11.28
컴포넌트의 옵션 props 기본 지정_컴포넌트에 지정하면 안되나?  (1) 2025.11.25
컴포넌트와 함수 선언 순서, 실행 순서_코드리뷰  (0) 2025.11.20
Calendar 컴포넌트_ import 'react-big-calendar'  (0) 2025.11.19
'개발/🟦 React' Related Articles more
Comments