createPortal

티스토리 뷰

web/react dom

createPortal

dev_been94 2024. 12. 16. 17:02

728x90

🎯 createPortal이란 무엇인가요?

**createPortal**은 React에서 컴포넌트를 다른 DOM 노드로 렌더링할 수 있도록 해주는 기능이에요.

기본적으로 React 컴포넌트는 부모 컴포넌트의 DOM 안에 렌더링되잖아요?
하지만 특정 상황에서는 컴포넌트를 부모 DOM 밖의 다른 위치에 렌더링해야 할 때가 있어요.
이럴 때 createPortal을 사용하면 됩니다.

🍕 비유로 이해하기: 창문 넘어 배달 음식 건네주기

여러분이 피자 가게에서 일한다고 상상해 보세요. 🍕

기본 렌더링 방식
- 주방에서 만든 피자를 주방 문을 통해 홀(부모 DOM)로 내보냅니다.
- 이게 React의 일반적인 렌더링 방식이에요.
createPortal을 사용하면?
- 주방에서 만든 피자를 주방 창문을 통해 바깥(다른 DOM 노드)에 바로 전달해요!
- 피자는 주방에서 만들어지지만, 최종 목적지는 다른 공간이 되는 거죠.

React의 createPortal은 컴포넌트를 **다른 DOM 노드(창문 밖)**에 렌더링할 수 있도록 도와주는 역할을 해요.

🛠️ createPortal 사용법

createPortal은 React의 ReactDOM.createPortal() 함수를 사용해서 구현해요.
간단한 예제를 통해 createPortal을 살펴볼게요.

1. 모달 창을 예제로 알아보기

모달 창은 일반적으로 화면의 최상단에 떠야 하잖아요?
그래서 createPortal을 사용해 모달을 부모 DOM 밖으로 렌더링할 수 있습니다.

HTML 구조 (index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Portal</title>
  </head>
  <body>
    <div id="root"></div> <!-- 메인 React 앱이 렌더링될 곳 -->
    <div id="modal-root"></div> <!-- 모달이 렌더링될 DOM 노드 -->
  </body>
</html>

React 코드

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// 모달 컴포넌트
function Modal({ children, onClose }) {
  return ReactDOM.createPortal(
    <div style={modalStyles}>
      <div>
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>,
    document.getElementById('modal-root') // 모달을 렌더링할 DOM 노드
  );
}

// 메인 컴포넌트
export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <h1>React Portal 예제</h1>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>

      {isOpen && (
        <Modal onClose={() => setIsOpen(false)}>
          <h2>모달 내용</h2>
          <p>이 모달은 createPortal로 렌더링되었어요!</p>
        </Modal>
      )}
    </div>
  );
}

// 모달 스타일
const modalStyles = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: 'white',
};

🔍 코드 설명

HTML에 모달을 위한 별도 DOM 노드
- index.html에 **<div id="modal-root"></div>**라는 별도의 DOM 노드를 만들었어요.
createPortal을 사용한 모달 렌더링
- **ReactDOM.createPortal**은 첫 번째 인자로 렌더링할 요소, 두 번째 인자로 렌더링될 DOM 노드를 받습니다.
- 이 코드에서는 모달을 **modal-root**라는 DOM에 렌더링하고 있어요.
메인 DOM과 분리된 렌더링
- 메인 컴포넌트는 여전히 **root**에 렌더링되지만, 모달은 **modal-root**에 렌더링됩니다.
- 부모 컴포넌트의 DOM 구조와 상관없이 최상위 레이어에 모달을 표시할 수 있죠.
결과
- 버튼을 클릭하면 모달 창이 화면의 최상단에 표시되고,
- 모달이 부모 컴포넌트 밖에서 렌더링되는 걸 확인할 수 있어요! 🎉

🚀 createPortal을 사용하면 좋은 상황

모달, 팝업 창
- 모달이나 팝업 창은 화면 최상단에 떠야 하고, 부모 컴포넌트의 CSS에 영향을 받으면 안 되기 때문에 사용하면 좋아요.
툴팁이나 드롭다운 메뉴
- 드롭다운 메뉴나 툴팁이 부모 컴포넌트의 DOM 밖에서 표시될 때 사용해요.
오버레이(UI 위에 덮어씌우는 화면)
- 화면 전체를 덮는 오버레이도 부모 DOM 밖에서 렌더링하면 깔끔해집니다.

🌟 한 줄 요약

**createPortal**은 React 컴포넌트를 부모 DOM 바깥의 특정 DOM 노드에 렌더링할 수 있게 해주는 기능이에요.
주로 모달, 팝업, 드롭다운처럼 독립적인 레이어를 만들 때 사용합니다!

🎉 마무리

React의 **createPortal**은 평소에는 필요하지 않지만, 모달이나 팝업처럼 화면의 구조를 벗어나 렌더링해야 할 때 아주 유용해요.
이제 **"React로 모달을 어떻게 만들지?"**라는 고민이 생기면 createPortal을 떠올려 보세요!

728x90

'web > react dom' 카테고리의 다른 글

prefetchDNS (1)	2024.12.16
preconnect (2)	2024.12.16
hydrate (0)	2024.12.16
findDOMNode (0)	2024.12.16
flushSync (0)	2024.12.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

250x250

JAM Development

티스토리 뷰

createPortal

🎯 createPortal이란 무엇인가요?

🍕 비유로 이해하기: 창문 넘어 배달 음식 건네주기

🛠️ createPortal 사용법

1. 모달 창을 예제로 알아보기

🔍 코드 설명

🚀 createPortal을 사용하면 좋은 상황

🌟 한 줄 요약

🎉 마무리

'web > react dom' 카테고리의 다른 글

티스토리툴바