이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.
⚛️ 기본 환경: IDE: VS code, Language: React
ReactDOM.createPortal()
: 렌더링하려는 HTML 요소를 다른 장소로 이동
⭐ Modal 창 등을 root Component와 구분하여 관리
사용 방법
1. ReactDOM import
|
1
2
|
import ReactDOM from "react-dom";
|
react-dom: React의 기능을 Web browser에서 사용하기 위해 import
= 웹브라우저에 대한 React용 어뎁터의 일종
2. 이동하고자하는 Component 선언
|
1
2
3
4
|
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onConfirm} />;
};
|
3. ReactDOM.createPortal() 사용
{createPortal(이동시키고자하는 Component, 이동하고자하는 위치의 요소 id)}
|
1
2
3
4
5
6
7
8
9
10
11
|
const ErrorModal = (props) => {
return (
<React.Fragment>
{ReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm} />,
document.getElementById("backdrop-root")
)}
</React.Fragment>
);
};
|
* document
: React는 Single Page Application을 권장하며 모든 JS파일이 index.html에 import 됨
파일은 여러개일지라도 실제 html 페이지는 1개 = index.html이며, document는 곧 index.html을 의미
→ index.html에서 root 컴포넌트와 분리하여 관리하고 싶은 요소들을 위한 태그 생성
4. index.html에 이동시키고자하는 위치 지정
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="backdrop-root"></div>
<div id="root"></div>
</body>
</html>
|
참고 자료
createPortal – React
The library for web and native user interfaces
react.dev
'JavaScript > React' 카테고리의 다른 글
| [ReactJS_Complete] React.useEffect() (0) | 2023.06.03 |
|---|---|
| [ReactJS_Complete] React.useRef() (0) | 2023.06.01 |
| [ReactJS_Complete] <div> Soup (1) | 2023.06.01 |
| [ReactJS_Complete] JSX Limitations & Workarounds (0) | 2023.06.01 |
| [ReactJS_Complete] Conditional Styling (0) | 2023.06.01 |
