react-dom의 createPortal이란?
React 프로젝트에서는 구현된 화면을 /public/index.html의 <div id="root">에서 렌더링 하는 데
react-dom의 createPortal을 사용하면 #root가 아닌 다른 태그에 id를 부여함으로써 영역을 분리하여 화면을 렌더링 할 수 있다.
[React] ReactDOM.createPortal()
모달 공부를 하다가 마주친 ReactDOM.createPortal()에 대해 알아보자!
velog.io
어떤 상황에 사용할 수 있을까?
- Modal 컴포넌트를 생성할 때 화면을 감싸고 있는 root를 개별적으로 사용할 수 있기 때문에 화면 우선순위 처리면에서 유용할 것 같다.
이외의 새롭게 알게된 부분
- 예제에서는 document.getElementId("#modal-root")로 portal를 생성했는 데 실습할 때는 document.getElementById("modal-root")를 사용하면서 # 유무에 따른 테스트의 어려움을 겪었다.
- findDomNode is deprecated in StricMode. warning이 콘솔에 찍혔었는 데 이 문제인가 해서 알아보니 React + typeScript 조합으로 구현할 때 index.tsx에 <React.StricMode>를 지워야 warning이 사라진다고 한다. 이는 각 프로젝트의 성격에 따라 다르게 설정해야 하기 때문에 맞춰서 사용하면 될 것 같다.
// /public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- 실제로 React App이 렌더링 되는 장소 -->
<div id="root"></div>
<!-- 모달이 실제로 렌더링 되는 곳 -->
<div id="modal-root"></div>
</body>
</html>
import React, { JSXElementConstructor, ReactElement } from "react";
import { createPortal } from "react-dom";
interface Props {
selector?: string;
children: ReactElement<any, string | JSXElementConstructor<any>>;
}
const Portal: React.FC<Props> = ({ children, selector }) => {
const rootElement = selector && document.getElementById(selector);
// document.getElementId()일 경우 selector는 "#modal-root"
// document.getElementById()일 경우 selector는 "modal-root"
// react-dom의 createPortal이란?
// React 프로젝트에서는 구현된 화면을 public/index.html의 <div id="root">에서 렌더링한다.
// 그런데 ReactDOM.createPortal()를 사용하면 <div id="root"> 가 아닌 다른 곳에서 이를 렌더링 할 수 있게 된다.
// + document.getElementById(selector) 사용 시 selector에 불러오는 id는 #modal-root가 아닌 modal-root여야 한다.
// + findDOMNode is deprecated in StrictMode. 오류 발생 시 index.tsx에 <React.StrictMode><App/></React.StrictMode>에 <React.StrictMode></React.StrictMode> 지우면 된다.
return (
<div>{rootElement ? createPortal(children, rootElement) : children}</div>
);
};
export default Portal;React 관련 강의 실습 따라 하다가 React-Dom의 createPortal을 사용해 보았는 데
실습 예제와 현재 사용하는 메서드들이 달라지면서 문제가 좀 있었고, 그걸 해결하다가 알게 된 createPortal의 역할에 대해서 간략하게 정리해 보았다.
개발하면서 안되는 부분이 있을 때는 로직을 파악해보고 적절한 곳에 콘솔 먼저 찍어보는 게 좋은 것 같다.
'더 알아보기 > 개념' 카테고리의 다른 글
| TanStack Query (0) | 2024.08.12 |
|---|---|
| [Postman] WebSocket Mock Server 사용법 (0) | 2024.05.21 |
| MVC 패턴 (1) | 2023.03.27 |
| SWR vs React-Query (1) | 2023.03.24 |
| 애자일(Agile) 방법론 (0) | 2023.03.24 |
댓글