Portal 사용의 이유

➡️ React 의 tree 구조에 따라서 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 그 영향을 받아서 같이 렌더링이 된다. 그래서 자식 컴포넌트 같은 경우는 쓸데없는 렌더링이 일어날 수도 있고 부모 컴포넌트의 스타일링에 제약을 받아 z-index 와 같은 후처리를 해야한다는 점도 있다.

이러한 DOM tree 상의 부모-자식 컴포넌트 간의 제약에서 Portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있기 때문에 Portal을 사용하는 것이다.

→ 쉽게말해서, tree구조상 내가 원하지도 않는 랜더링을 불러오기 때문에 위치는 root에 두고 필요할시 랜더링을 하게 만드는 방법

➡️ 모달이 렌더링 될 위치 만들어주기.

public/index.html

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

➡️ Portal 만들기

src/helpers/Portal.js

import ReactDom from "react-dom";

const ModalPortal = ({ children }) => {
    const el = document.getElementById("modal")
    return ReactDom.createPortal(children, el)
}

export default ModalPortal

https://velog.io/@codns1223/React-React-Portal이란-React-Portal로-modal-구현