React portal
리액트 포털(React Portal)은 리액트 애플리케이션에서 DOM 트리의 특정 부분을 다른 DOM 노드로 렌더링할 수 있는 기능입니다. 일반적으로 리액트 컴포넌트는 자신이 마운트된 DOM 요소 내에서 렌더링됩니다. 하지만 리액트 포털은 컴포넌트가 다른 DOM 요소 내에 렌더링될 수 있도록 지원합니다.
쉽게말해
해당 컴포넌트가 다른 컴포넌트에 깊이 중첩되어 있는 경우 렌더링 됐을때 제 기능을 못할 수 있으므로 내가 원하는 지점에 컴포넌트가 렌더링 될수있게 위치 지정할수 있습니다.
리액트 포털은 주로 다음과 같은 상황에서 사용됩니다:
-
모달(Modal) 또는 팝업창: 모달 컴포넌트를 렌더링할 때, 일반적으로 모달 컴포넌트는 루트 요소에 직접 마운트됩니다. 이때 리액트 포털을 사용하면 모달 컴포넌트를 다른 부모 요소 내에 렌더링할 수 있습니다.
-
Z-인덱스 제어: 특정 컴포넌트를 다른 컴포넌트 위에 렌더링해야 할 때, 리액트 포털을 사용하여 다른 DOM 노드로 컴포넌트를 이동시킬 수 있습니다. 이를 통해 Z-인덱스와 관련된 이슈를 해결할 수 있습니다.
ex)모달 컴포넌트를 내가 원하는 위치에 렌더링 시키기위해 포탈 사용.
public폴더 안에 index.html로 들어가 모달 컴포넌트를 렌더링할 위치를 찾아 <div id="name"> 만들어준다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!--렌더링 되어야할 실제 DOM 포인터 만들기 -->
<div id="modalRoot"></div>
<div id="root"></div>
</body>모달 컴포넌트 수정하기.
import './CSS/ModalWraper.css'
import Modal from './Modal'
//react-dom import,
import ReactDom from 'react-dom'
const ModalWraper = props => {
return (
<div className="mainModalWraper" onClick={props.close}>
{/* <Modal close={props.close} error={props.error} /> */}
{ReactDom.createPortal(
//(렌더링 되어야할 리액트 노드,즉 옮길 컴포넌트, 포인터)
//요소 렌더링 되어야 하는 실제 DOM 컨테이너 포인터(실제 DOM요소의 접근
<Modal close={props.close} error={props.error} />,
document.getElementById('modalRoot')
)}
</div>
)
}
export default ModalWraper1.포털로 이동시킬 장소 정하기.
2.포털로 컴포넌트를 옮기기.
