undefined
Portal -React 본문
반응형
1. Portal 이란?
- 컴포넌트를 원하는 위치에 렌더링 할 수 있다. ex) root의 바깥쪽
2. 사용이유?
- 독립적인 위치에서 관리가능 (그러나 원래의 react의 기능 그대로 사용 가능)
- modal 또는 sideBar 등 같이 논리적으로 맨 위에 있어야 할 컴포넌트를 맨 위의 위치로 이동 가능
3. 사용 방법
(1) index.html에 portal을 위한 위치 만들기
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="overlay-root"></div>
<div id="root"></div>
overlay-root를 만들었다.
root는 기존 App.js 등이 들어간 div
(2) reactDOM을 import
import ReactDOM from 'react-dom';
portal은 reactDOM의 기능이다.
(3) portal의 대상 만들기
const ModalOverlay = (props) => {
return (
<Card className={styles.modal}>
<h2>Invalid input</h2>
<p>{props.p}</p>
<Button onClick={props.onModalOff}>Okay</Button>
</Card>
);
};
기존 모달 컴포넌트 위에 새로운 JSX함수를 만들어준다.
이것은 portal의 대상이다.
(4) portal 하기
const Modal = (props) => {
return (
<>
{ReactDOM.createPortal(
<ModalOverlay p={props.p} onClick={props.onModalOff} />,
document.querySelector('#overlay-root')
)}
</>
);
};
기존 모달은 ReactDOM.createPortal 안에 ModalOverlay를 넣어 포탈시켜준다.
ReactDOM.createPortal(대상,위치)
대상에 props를 이용하여 값과 함수를 전달 시켜주어야 한다.
위치는 처음에 만들어두었던 div 지정 (querySelector or getElementByID를 통함)
4. 결과 확인하기
미리 만들어 두었던 overlay-root에 modal이 성공적으로 Portal된 상태
반응형
'React' 카테고리의 다른 글
| Error Boundary - React (0) | 2022.07.02 |
|---|---|
| useReducer -React (0) | 2022.06.23 |
| UseEffect -React (0) | 2022.06.23 |
| Ref - React (0) | 2022.06.22 |
Comments