React Academy · 강의

React Portal이란 무엇인가요

createPortal API와 루트 div 외부에서 렌더링하는 것이 유용한 이유를 이해합니다.

React Portal이란 무엇인가요은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 레슨에서는 React 포털이 무엇인지, 부모 DOM 트리 외부에서 렌더링하는 것이 왜 유용한지, 그리고 createPortal API를 사용하는 방법을 배웁니다.

일반적인 React DOM 계층 구조

기본적으로 모든 컴포넌트는 부모의 DOM 노드 안에서 렌더링됩니다. 일반적으로 전체 React 앱은 하나의 `

` 안에 있습니다. 이는 모달, 툴팁 또는 드롭다운이 `overflow: hidden`인 부모에서 벗어나야 할 때까지는 잘 작동합니다.

포털이란 무엇입니까

**포털**을 사용하면 컴포넌트의 출력을 React 루트 외부에 존재하는 다른 DOM 노드에 렌더링할 수 있습니다. 컴포넌트의 React 트리는 그대로 유지되고 DOM 위치만 변경됩니다.

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

포털이 필요한 이유

`overflow: hidden`, `z-index` 쌓임 맥락, 부모의 `transform`과 같은 CSS 속성은 자식 요소를 잘라 내거나 숨길 수 있습니다. 포털은 렌더링된 출력을 다른 DOM 노드에 연결하여 이러한 제약을 벗어납니다.

이벤트 버블링은 여전히 작동합니다

포털의 DOM 노드가 부모 외부에 있더라도 **React 이벤트는 DOM 트리가 아니라 React 컴포넌트 트리를 따라 여전히 버블링됩니다**. 포털 모달 안을 클릭하면 해당 이벤트가 React 부모까지 버블링됩니다.

포털 대상 만들기

기존의 어떤 DOM 노드로든 포털을 만들 수 있습니다. 일반적인 방법은 `index.html`에 전용 `

// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

포털 수명 주기는 React 부모에 연결됩니다

포털은 부모 컴포넌트가 마운트될 때 마운트되고 부모가 언마운트될 때 언마운트됩니다. React는 여전히 포털을 동일한 컴포넌트 트리의 일부로 추적하므로 컨텍스트와 ref가 정상적으로 작동합니다.

포털에서도 컨텍스트가 작동합니다

포털은 React 컴포넌트 트리의 일부로 유지되므로 포털 위쪽에서 제공한 컨텍스트 값에 포털 내부에서도 계속 접근할 수 있습니다. DOM 위치는 React 컨텍스트 연결에 영향을 주지 않습니다.

상태와 함께 createPortal 사용하기

상태 변수로 포털의 표시 여부를 제어하십시오. 버튼으로 상태를 전환하면 버튼은 원래 DOM 위치에 그대로 있고 포털 콘텐츠는 document.body에 나타납니다.

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

서버 측 렌더링 및 포털

포털을 사용하려면 DOM 노드가 존재해야 하므로 포털은 항상 클라이언트 측에서 실행됩니다. Next.js 또는 다른 SSR 설정에서는 `useEffect`나 마운트 상태 확인을 사용하여 포털 렌더링 코드가 브라우저에서만 실행되도록 하십시오.

빠른 확인

React 포털은 콘텐츠를 다른 DOM 노드에 렌더링합니다. 이때 React 컴포넌트 트리의 어떤 측면이 영향을 받습니까?

정리

포털을 사용하면 createPortal()로 모든 DOM 노드에 React 출력을 렌더링할 수 있습니다. React 트리, 컨텍스트, 이벤트 버블링은 영향을 받지 않습니다. 모달과 툴팁에서 오버플로 및 z-index 제약을 벗어나야 할 때 사용하십시오.

다음 학습 내용

다음 레슨에서는 **포털을 사용한 모달 컴포넌트 만들기**를 다룹니다. open/close 상태를 관리하면서 document.body에 포털로 렌더링되는 완전히 재사용 가능한 모달을 만들어 봅니다.

자주 묻는 질문

“React Portal이란 무엇인가요” 강의는 무료인가요?

네 — “React Portal이란 무엇인가요” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“React Portal이란 무엇인가요”에서 뭘 배우나요?

createPortal API와 루트 div 외부에서 렌더링하는 것이 유용한 이유를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“React Portal이란 무엇인가요” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기