Modal 모달 만들기

//modal.tsx
interface Props {
    visible?: Boolean;
}

const ModalBox = styled.div<Props>`
  <...>
  display: ${(props) => props.visible ? 'flex' : 'none'}; 
  z-index: 150;
  <...>
`;

const Modal = (props: any) => {
    //next용 modal component연결(modal을 페이지 가장 상위에 노출시키기 위해서)
    const [isBrowser, setIsBrowser] = useState(false);
    
    useEffect(() => {
        setIsBrowser(true);
    }, []);
    
  	//modal
    const [show, setShow] = useState(false);

    const CloseHandler = () => {
        setShow(false);
        props.onClose(false);
    };

    useEffect(() => {
        setShow(props.show);
    }, [props.show]);
	
    //React.DOM으로 modal과 _app.tsx 연결
    if (isBrowser) {
        return ReactDOM.createPortal(
            <ModalBox visible={show}>
                <span onClick={CloseHandler}>←</span>
                <div>
                    <div>{props.title}</div>
                    <div>{props.children}</div>
                </div>
            </ModalBox>,
            document.getElementById("modal-root")
        );
    } else {
        return null;
    }
};

export default Modal;

//_app.tsx
<...>
<div id='modal-root'></div>
<Header />
<Mainbody>
  <Component {...pageProps} />
</Mainbody>
<...>

const Test = React.memo(() => {
  <...>
	//Modal 작동
	const [isVisible, setIsVisible] = useState(false);
	const onSetIsVisible = () => {
		setIsVisible(isVisible => !isVisible);
	};
  	
  	return (
        <>
            <Modal
                onClose={onSetIsVisible}
                show={isVisible}
                title='title'>
                  <div>{children}</div>
			</Modal>
			<Button onClick={onSetIsVisible}>버튼</Button>
  
}
<...>

1. getElementById의 정확한 사용법
2. React.DOM의 사용법