createPortal 내가 해냄

createPortal 내가 해냄내가 해냄/React2023. 4. 14. 17:04@두루마기

Table of Contents

인트로

오늘은 portal에 대해서 알아보겠습니다. 너무 힘들어서 별 말없이 바로 시작하겠습니다.. 나 파이팅..

왜 사용하나요?

createPortal을 사용하면 자식을 원하는 위치에 렌더링 시킬 수 있습니다.

여기서 자식은 react로 렌더링 할 수 있는 모든 것을 말합니다.

createPortal을 사용하면 어떤 컨테이너에 있든 'escape'가 가능합니다.

또한 이벤트 버블링 문제를 해결할 수 있으며 Z-index 관리가 편하다 등의 장점이 있습니다.

createPortal(children, domNode)

createProtal을 사용해서 portal을 만들 수 있습니다.

import ReactDOM from 'react-dom';

//컴포넌트
// return 내부
{
  ReactDOM.createPortal{children, children을 렌더링할 DOM노드}
}

domNode에는 document.body나 html에 특정 ID를 가진 요소 등이 들어갈 수 있겠습니다. document.getElementById를 사용해서 특정 ID를 가진 요소를 취득할 수 있습니다. ex) document.getElementById('렌더링할 요소 id')

createPortal 사용 시 React는 children을 렌더링 할 DOM노드 내부에 배치해 줍니다.

일부 코드

저는 Error모달을 나머지 페이지 위에 띄우기 위해 portal을 사용했습니다.

index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="backdrop-root"></div>
    <div id="overlay-root"></div>
    <div id="root"></div>
    <!--
 	...
    -->
  </body>

ErrorModal.js

const ErrorModal = (props) => {
  return (
    <>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />,
        document.getElementById("backdrop-root")
      )}
      {ReactDOM.createPortal(
        <ModalOverlay
          title={props.title}
          message={props.message}
          onConfirm={props.onConfirm}
        />,
        document.getElementById("overlay-root")
      )}
    </>
  );
};

<Backdrop />과 <ModalOverlay />를 각각 id로 "backdrop-root", "overlay-root"을 가진 DOM노드로 렌더링 해주는 코드입니다.

둘 다 원하는 위치에 잘 들어간 모습이네요. Good

React 공식 문서 내용을 참고하였습니다.

'내가 해냄 > React' 카테고리의 다른 글

함수형 컴포넌트 렌더링 with useEffect, useLayoutEffect (0)	2023.05.19
키보드 방향키로 드롭다운 선택하기 (2)	2023.04.19
uselocation 사용해서 nav바 스타일 변경하기 (0)	2023.04.10
React Github page 배포 내가 해냄 (0)	2023.04.04
리액트에서 SCSS 사용하기 내가 해냄 (0)	2023.03.26

@두루마기 :: 내가해냄

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

인트로