[React] 리액트 Portal(포탈) 사용해서 모달 구현하기

참고

https://react.dev/reference/react-dom/createPortal

createPortal – React

 

https://abangpa1ace.tistory.com/entry/React-Portal-%ED%8F%AC%ED%83%88

[React] Portal (포탈), Modal 구현하기

https://dev-bomdong.tistory.com/21

React | Portal을 이용한 Modal 구현

https://jeonghwan-kim.github.io/2022/06/02/react-portal

리액트 Portal

 

포탈 사용 이유

포탈을 사용하면 부모/자식 관계는 유지하지만 독립적인 위치에서 자식 컴포넌트가 렌더링된다.

→ 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 태그 자식요소로 잘 렌더링된다.