react 포탈

https://velog.io/@jerrychu/React-React-Portal-사용-이유와-방법

[React] React Portal이란, React Portal로 modal 구현

왜 새로운 게 끝도 없이 나오는거지...? React Portal은 진짜 생전 첨 들어보는데 인강 듣다가 알게돼서 기록해두기 위해 끄적여본다...공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법

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

🥔

집으로 가는 포탈?

돔 구조상 부모노드 밑에 위치하는게아니라 독립적인 엘리먼트를 만들고싶을경우 사용

Portal 사용의 이유

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

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

➡️ 또 다른 이유로는 modal이 독립적이지 않고 부모의 DOM노드 안에서 렌더링 되는 것이 의미적인 관점이나 간결한 HTMl 구조를 갖췄는지의 관점으로 보면 별로 좋지 않기 때문이다.

왜냐, 기본적으로 모달은 페이지 위에 표시되는 오버레이이기 때문이다. 모달은 전체페이지에 대한 오버레이이기 때문에 당연히 다른 모든 것의 위에 있다. 그래서 모달이 만약 다른 HTML 코드 안에 중첩되어 있다면, 기술적으로는 스타일링 덕분에 작동할지 몰라도 좋은 코드가 아니고 좋은 구조 또한 아니게 된다.

예를들어 스크린 리더가 렌더링 되는 HTML 코드를 해석할 때 일반적이 오버레이라고 인식하지 못할 수도 있다. 또한 의미적인 관점이나 구조적인 관점으로 보면 이것은 HTML 코드 안 깊은 곳에 자리잡고 있기 때문에 이 모달이 다른 모든 내용에 대한 오버레이인지 명확하지 않다.

그래서 리액트 개념에서 오버레이 내용이 있는 모달이 깊게 중첩되면 안 되는 문제를 해결할 수 있게끔 한 방법이 React Portal인 것이다.

modal같이 독립적인 위치에 존재해야지 돔 구조상 의미적인 관점에서 맞는지? (모달을 스크린 리더가 인식하지 못할 수 있음) 자식 컴포넌트의 쓸데없는 랜더링 방지, Z-dinx 후처리 방지. 실제 DOM 위치에서는 분리되지만 리액트 어플리케이션 컴포넌트 트리 구조를 따르기때문에 관심사 분리는 가능하지만 이벤트 전달에는 무리가 없다.

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

이후 해당 wrapper를 감싸주면됨.