# All files / src/chap05 PortalBasic.js

0% Statements 0/5
0% Branches 0/2
0% Functions 0/3
0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

     import { useState } from 'react';
    import { createPortal } from 'react-dom';
    import './PortalBasic.css';

    export default function PortalBasic() {
      // 다이얼로그 창의 개폐 상태를 나타내는 State(false로 닫힌 상태)
      const [show, setShow] = useState(false);
      // 버튼 클릭 시 핸들러(State 켜기/끄기)
      const handleDialog = () => setShow(s => !s);

      return (
        <form>
          <button type="button" onClick={handleDialog}
            disabled={show}>
            다이얼로그 표시
          </button>
          {show && createPortal(
            <div className="dialog">
              <p>Portal에서 생성된 대화상자</p>
              <button type="button" onClick={handleDialog}>
                닫기
              </button>
            </div>,
            document.getElementById('dialog')
          )}
        </form>
      );
    }