react portal

모달창이나 다이얼로그를 구현하는데 따로 분리가 되지 않고 같이 구현해 놓으면 구조적으로 의미적으로 좋지 않다. 충돌 등이 일어날 수 있나보다.

구현되는 곳

index.html 같은 곳에

    <div id="backdrop-root"></div>
    <div id="overlay-root"></div>

이렇게 분리할 곳을 만들어 놓고

import ReactDOM from 'react-dom'

const Backdrop = props => {
    return <div className={styles.backdrop} onClick={props.onConfirm}/>
}

const ModalOverlay = props => {
    return <Card className={styles.modal}>
        <header className={styles.header}>
            <h2>{props.title}</h2>
        </header>
        <div className={styles.content}>
            <p>{props.message}</p>
        </div>
        <footer className={styles.actions}>
            <Button onClick={props.onConfirm}>Okay</Button>
        </footer>
    </Card>
}

const ErrorModal = props => {
    return (
        <React.Fragment>
            {ReactDOM.createPortal(
            <Backdrop onConfirm={props.onConfirm} />,
            document.getElementById('backdrop-root'))}
            {ReactDOM.createPortal(
            <ModalOverlay 
            title={props.title} 
            message={props.message} 
            onConfirm={props.onConfirm} />, 
            document.getElementById('overlay-root'))}
        </React.Fragment>
    )
}

export default ErrorModal

포탈을 만들어서 거기에다가 넣는다.

props를 맞춰 넣어주고 위치는 document.getElementById로 넣는다.