4. 리액트의 고급개념

포털

1.포털이란? 어떻게 생성하는가?
:: 자식 컴포넌트를 부모 컴포넌트 DOM과 독립적으로 생성할 수 있는 기능이다. 보통 팝업창, 툴팁 같은 경우 포탈을 많이 사용한다.

import ReactDOM from 'react-dom';
import './App.css';

const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      {/* e.stopPropagation()은 모달 내부 클릭 시 닫히지 않게 함 */}
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">{title}</div>
        <div className="modal-body">{children}</div>
        <div className="modal-footer">
          <button onClick={onClose}>취소</button>
          <button className="confirm-btn">확인</button>
        </div>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};