[React] React Portal

부모의 z-index가 낮아서 발생하는 문제

z-index는 부모의 값이 우선된다.

z-index는 트리구조에서 같은 레벨인 경우 적용됩니다.
위 이미지처럼 부모1의 자식 컴포넌트는 z-index가 아무리 높아도
부모2가 더 상위로 표시됩니다.

React Portal

feat. GPT
React Portal은 부모 컴포넌트의 DOM 구조와는 독립적으로 자식 요소를 렌더링할 수 있기 때문에, 이 방법은 부모의 z-index와 상관없이 자식 요소가 상위 레벨에서 렌더링되게 합니다.

position: fixed로 설정된 컴포넌트는 굳이 부모 컴포넌트 안에 렌더링되지 않아도 되겠죠?

React Portal을 이용하면 해당 컴포넌트를 body에 직접 렌더링할 수 있습니다.

import ReactDOM from 'react-dom';

function ChildComponent (props){
  return ReactDOM.createPortal(
    <>
      ~~~
    </>, document.body	// 자식 요소를 body에 직접 렌더링
  );

export default ChildComponent;

React Portal을 이용하면 위 상황에서 부모1의 자식 컴포넌트를
부모 2보다 위로 표시할 수 있게 됩니다.