React Portal로 모달 생성하기

Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.

ReactDOM.createPortal(child, container)

첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식입니다.

두 번째 인자(container)는 DOM엘리먼트입니다.

 

1. Container 생성

<div id="root"></div>
<div id="portal"></div>

위 코드처럼, 기본 root밖에 portal을 생성하고 위에 createPortal의 두번째 인자로 사용할 예정입니다.

 

2. createPortal 이용하기

import ReactDOM from 'react-dom'

const Modal =({ open, children, onClise }) => {
  if (!open) return null
  return ReactDOM.createPortal(
  	<>
    	<div style={overlayStyle} />
        <div style={modalStyle}>
        	<button onClick={onClose}닫기</button>
            {children}
        </div>
    </>,
    document.getElementById('portal')
  )
}

 

 

portal은 이벤트 버블링이 가능합니다.

이벤트 버블링은 중첩된 자식 요소에서 이벤트가 발생할 때 그 이벤트가 부모로 전달되는 것입니다.

비록 portal로 생성한 부분이 부모 DOM 밖에 생성되더라도(DOM 틜에서의 위치에 상관없이) portal은 여전히 React 트리에 존재해서 React 트리에 포함된 상위로 이벤트 버블링이 가능합니다.

 

즉, DOM 트리 상위가 아니라도 React 트리에서 상위이면 이벤트 버블링 가능.