react-portal 사용기

개요

리엑트에서 렌더링 과정에서는 부모 와 자식 컴포넌트가 렌더링 되는 Tree구조를 가져간다. 이로 인해 DOM계층 구조에 영향을 받게 되는데 이 때문에 모달과 같은 컴포넌트를 사용할때 z-index를 이용해서 스타일링을 해줘야한다. 하지만 react-portal 사용한다면 독립적인 위치에서 렌더링을 통해 부모 컴포넌트의 영향을 받지 않을 수 있다.

사용법

ReactDOM.createPortal(child, container)

• child는 엘리먼트 문자열 혹은 fregment와 같은 렌더링 할 수 있는 요소이다.
• container는 dom element를 의미한다.

next js에서 에러가 날 경우

• react-portal을 이용한 모달과 토스트는 꼭 mount 이후에 사용해줘야 한다. 그도 그럴것이
  초기 로드시 돔 요소가 생성되있지 않으면 하이드레이션 에러가 발생하기 때문이다.

예시 코드

import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  const [isMounted, setIsMounted] = useState(false);
  
  useEffect(() => {
    setIsMounted(true);
    return () => setIsMounted(false);
  }, []);
  
  if (!isOpen || !isMounted) return null;
  
  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>닫기</button>
      </div>
    </div>,
    document.getElementById('modal-root') 
  );
}

export default Modal;