참고
https://react.dev/reference/react-dom/createPortal
createPortal – React
The library for web and native user interfaces
react.dev
https://abangpa1ace.tistory.com/entry/React-Portal-%ED%8F%AC%ED%83%88
[React] Portal (포탈), Modal 구현하기
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해
abangpa1ace.tistory.com
https://dev-bomdong.tistory.com/21
React | Portal을 이용한 Modal 구현
한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아, 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주
dev-bomdong.tistory.com
https://jeonghwan-kim.github.io/2022/06/02/react-portal
리액트 Portal
…
jeonghwan-kim.github.io
포탈 사용 이유
포탈을 사용하면 부모/자식 관계는 유지하지만 독립적인 위치에서 자식 컴포넌트가 렌더링된다.
→ CSS 상속 구조에서 벗어날 수 있음
직접 구현하면서 좋다고 느낀 점은 z-index에서 자유로울 수 있다는 점이었다.
풀 스크린 모달일 경우 z-index를 추가하지 않아도 되고,
dimmed 배경이 깔릴 경우 dimmed 배경요소만 고려해서 z-index를 설정하면 되어서 좋았다.
포탈 사용해서 모달 구현하기
1. div 태그 추가
2. ModalPotal 컴포넌트 추가
createPortal(렌더링 요소, 타겟되는 부모요소)
import { createPortal } from 'react-dom'
const ModalPotal = ({ children }: { children: React.ReactElement }) => {
const modal = document.getElementById('modal')!
return createPortal(children, modal)
}
export default ModalPotal
3. Modal 추가하기
모달 컴포넌트를 구현한 뒤 만들어둔 ModalPotal을 감싸면 완료
div 태그 자식요소로 잘 렌더링된다.