React Portal로 모달 생성

modal 창이 열렸음에도 불구하고 Z-index 2인 div가 모달 창과 함께 나타나는데,
이는 모달이 Z-index가 1인 부모를 갖고 있기 때문에 Z-index를 1000으로 설정해 줘도 부모에게 해당 값이 상속된다
이를 해결하기 위해 Portals를 사용한다

1. Container 생성

index.html 내부
<div id=”root”></div>
<div id=”portal”></div>

createPortal 이용하기

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

이벤트 버블링
이벤트 버블링은 중첩된 자식 요소에서 이벤트가 발생할 때, 그 이벤트가 부모로 전달되는 것
비록 포탈로 생성한 부분이 부모 DOM 밖에 생성되더라도 portal은 여전히 REact 트리에 존재해서 React 트리에 포함된 상위로 이벤트 버블링이 가능
-> 비록 DOM 트리 상위가 아니더라도 리액트 트리에서 상위면 이벤트 버블링이 가능