티스토리 뷰
Portal(포탈)
React Portal은 컴포넌트의 DOM 계층 구조를 유지하면서도, 실제로는 그 컴포넌트를 다른 DOM 노드에 랜더링할 수 있게 해주는 기능이라고 하며, 주로 모달, 알림, 툴팁과 같은 UI 요소를 화면의 상위 레이어에 표시할때 유용하다고 한다.
예시
- index.html - 모달 위치 생성
<body>
<div id="root"></div>
<div id="modal"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
- App.tsx - 버튼 클릭시 모달을 보여주기 위한 화면 작업
import React from 'react';
import './App.css'
import Modal from './conpornents/Modal';
function App() {
const [isOpen, setIsOpen] = React.useState(false);
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);
return (
<div>
<h1>React Portal Example</h1>
<button onClick={openModal}>Open Modal</button>
{isOpen && <Modal onClose={closeModal}>This is a modal!</Modal>}
</div>
)
}
- Modal.tsx - 모달 컴포넌트 생성후 모달 화면 작업
import React from "react";
import ReactDOM from "react-dom";
import styles from "./Modal.module.css";
type ModalProps = React.PropsWithChildren<{
onClose: () => void;
}>
const Modal = ({ onClose, children }: ModalProps) => {
const modalRoot = document.getElementById('modal');
if (!modalRoot) return null;
return ReactDOM.createPortal(
<div className={styles.modalWrap}>
<div className={styles.inner}>
{children}
<button onClick={onClose}>close</button>
</div>
</div>,
modalRoot
)
}
export default Modal;
- Modal.module.css
.modalWrap{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.inner{
background-color: white;
padding: 20px;
border-radius: 8px;
}
결과
포탈을 이용한 모달 출력을 해보았는데 해보면서 기존엔 자바스크립트를 이용하여 버튼 클릭시 모달이나 툴팁을 보여주었는데 리액트 포탈을 이용한 방식과 기존 스크립트를 이용한 방식과 어떤 차이가 있으며 그 차이로 인해 포탈로 작업하는게 더 좋은지 안좋은지 다음 글에 좀 더 자세히 다뤄볼려고 한다!!
'개발 > react' 카테고리의 다른 글
| [React] 리액트 프로젝트시 칭찬받는 폴더 구조? (3) | 2024.10.14 |
|---|---|
| [React]Portal을 이용한 모달 vs Javascript을 이용한 모달 (0) | 2024.10.11 |
| [React]CSR vs SSR and SPA vs MPA 정리하기 (4) | 2024.10.08 |