React_Portal사용과 여러 예시에 적힌 "children"에 관한 고찰

[ 결론 ]

여러 Portal 예시에서 보여주고 있는 "props"에 적힌 "children"은 그냥 정말 Props였고,

return에 기재된 "children"은 내가 그려 주고 싶은 모습을 넣어두는 곳이었다.

 

Portal을 쓰는 이유는 DOM트리 구조에 따라 모달이 생성된 위치에 따라 부모로부터 상속받는 여러 제약에서

해제되어 편하게 작성될 수 있는 장점이 있다.

 

 

 

----------------------------------------------------------------------------------------------------

 

항상 많은 것을 배우고 있는 개발자 분과 대화를 하던 도중,

요즘 구현하고 있는 모달에 대해 얘기가 나와서 대화를 나누었다.

그러다가 "Portal"이라는 다음 스텝이 있다고 알려 주셨고, 개략적으로 react최상위 트리인 <div id="root"></div>와 같은 라인에

영역을 하나 더 생성해 두고, 어느 곳에서 호출되더라도 새로 생성한 영역(<div id="root"></div>와 같은 라인에 생성해 둔 영역)에 넣을 수 있다고 알려 주셨다.

 

충격이었다.

그곳을 건드릴 수 있다는 생각을 전혀 못하고 있었는데, 갑자기 생각의 지평이 확 넓어진 것이 느껴졌다.

 

그래서 찾아보고 직접 실행해 보았다.

 

찾아본 바,

가장 많은 예제로 나오는 것들이 "모달(팝업창)"을 구현하는 방식으로 설명을 해주셨고,

아래와 같은 코드가 가장 많이 보였다.

참고 자료 : https://jeonghwan-kim.github.io/2022/06/02/react-portal

import ReactDOM from "react-dom";

const ModalPortal = ({ children }) => {

const el = document.getElementById("modal");

return ReactDOM.createPortal(children, el);

};

export default ModalPortal;

위 코드처럼 집어넣을 엘리먼트를 생성한 후

createPortal을 반환하는 형식이었다.

 

그래서 정말 구현이 되는지 확인하기 위해 아래와 같이 코드를 작성 후 실행해 보았다.

import Modal from "./Modal";

import { useState } from "react";

import ModalPortal from "./ModalPortal";

import "./TestArea.css";

const TestArea = () => {

const [isModal, setIsModal] = useState(false);

const onoff = () => {

setIsModal(!isModal);

};

return (

<div className="TestArea">

테스트 영역 입니다

<button onClick={onoff}>열려라 뺙</button>

{isModal && (

<ModalPortal>

<Modal close={onoff} />

</ModalPortal>

)}

</div>

);

};

export default TestArea;

모달 영역(<Modal />)을 컴포넌트로 생성하고

모달 영역을 모달포탈로 감쌌다.

그랬더니

root영역과 동일한 선상에 만들어 둔 modal영역으로 모달 페이지가 들어가 있었다.

그래서 모달 생성 시, 부모의 CSS의 제약이나,  Z-index를 조절해서 깊이를 조정하는 일이 간편해져서 편하겠다는 생각을 했다.

 

 

 

그런데,

import ReactDOM from "react-dom";

const ModalPortal = ({ children }) => {

const el = document.getElementById("modal");

return ReactDOM.createPortal(children, el);

};

export default ModalPortal;

모달포털을 생성하는 코드에서 props로 기재한 "children"과

return에 적혀 있는 "children"이 무슨 역할을 하는 것인지 잘 이해가 되지 않았다.

** 처음에는 props로 받은 children을 return에서 다시 뿌려준다고 생각했었다.

 

그래서

여러 글을 찾아본 결과

이 글에서 이해할 수 있었다.

참고 : https://stackoverflow.com/questions/55189388/use-react-portal-to-render-a-child-into-a-dom-node-of-the-parent-component

Use React Portal to render a child into a DOM node of the parent component

 

 

Props로 받은 "children"은 그냥 Props역할을 하는 것이고,

 return에 기재된 "children"은

모달포털컴퍼넌트 생성 시, 별도로 영역을 만들어서 return의 "children"위치에 넣을 수 있는 것이었다.

 

요렇게

import ReactDOM from "react-dom";

const ModalPortal = ({ children }) => {

const area = <div>{children}이게 되냐?</div>;

const el = document.getElementById("modal");

return ReactDOM.createPortal(area, el);

};

export default ModalPortal;

 

그래서 어떤 컴퍼넌트를 감싸지 않고,

모달포털 단독으로 내가 지정한 엘레멘트 영역에, 내가 넣고 싶은 모습을 넣을 수 있는 것이었다.

 

결과적으로

모달포털 컴퍼넌트를 생성 후 다른 컴퍼넌트를 감싸는 용도로만 쓸 수 있을 줄 알았던 나의 착각을 깰 수 있었던 고찰이었다.