반응형
Portal
Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 렌더링 하는 방법이다.
첫번째 인자는 렌더링 할 요소이고, 두 번째 인자는 DOM 엘리먼트 이다.
ReactDOM.createPortal(child, DOMelement)
🔻 Portal을 활용하여 Modal 만들기
- html에 새로운 DOM 요소를 만든다.
<body>
<div id="overlays"></div>
<div id="root"></div>
</body>
- ReactDOM을 import하고 <ReactDOM.createPortal>의 첫번째 인자로
backdrop(요소외의 배경을 검정으로 해줄 요소) / modal로 띄워줄 컴포넌트를 넣어주고
두 번째 인자로 위에서 만든 overlays DOM을 지정해준다.
import ReactDOM from 'react-dom';
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<>
{ReactDOM.createPortal(<Backdrop />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</>
);
};
export default Modal;
반응형
'Archive' 카테고리의 다른 글
| [React] React Query로 서버 상태 관리 기초 개념 (0) | 2022.07.28 |
|---|---|
| [TIL] react native > .gitattributes / project.pbxproj (1) | 2022.06.29 |
| [TIL] React Native - M1 setting (Rosetta 없이) (0) | 2022.05.23 |
| [GIT] git 기본사용 reset / revert / merge / rebase (0) | 2022.05.15 |
| [React] React Hook Form (0) | 2022.05.08 |