React Portal

리액트 포탈은 컴포넌트가 생성되는 위치 이외의 DOM 요소에 랜더링할 수 있게 해주는 기능이다. 이를 통해 모달, 드롭다운 메뉴 등을 React 컴포넌트로 작성하면서도 원하는 위치에 랜더링시킬 수 있다. (특히 모달의 경우 화면 전체를 가리는 경우가 많기 때문에 z-index 문제로 코드 최하단에 랜더링하는 것이 좋다.)

ReactDOM.createPortal(child, container) 함수를 통해 포탈을 열어주게 되는데, 이 함수는 두 개의 매개 변수를 받는다. 하나는 랜더링할 컴포넌트 혹은 JSX이고, 다른 하나는 랜더링할 container의 위치이다. 이 container의 자식 노드로 child가 생성되는 형식이다.

const Modal = ({ children }) => {
  const modalRoot = document.getElementById('modal-root'); // 실제로 모달이 렌더링될 위치
 
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    modalRoot
  );
};
 
export default Modal;

그렇다면 이 포탈의 container 부분을 state를 통해서 동적으로 변경하도록 할 수 있지 않을까?

이거의 좋은 점이랄까, Prop은 필요한 곳에서 받고, 랜더링은 원하는 곳에서 랜더링 되는 게 장점이지 않을까?