My Boundary As Much As I Experienced

React) 리액트 포털(React Portal) 본문

FrontEnd/React

React) 리액트 포털(React Portal)

Bumang 2023. 10. 22. 19:25

리액트 포털은 언제 쓰는가?

웹페이지를 만들다보면 종종 모달을 만들 상황이 발생한다.

많은 사람들이 모달을 그때그때 모달이 필요한 페이지의 자식으로 만들고 있다.

그렇게 되면 원래라면 해당 페이지의 맨 아래 있어야하는 모달을 css를 사용하여 최상단에 있는 것처럼 꾸미는 것이다.

 

이게 완전히 틀리다는건 아니지만, 의미적으로 좋지 않긴 하다.(최상단에 보이는 컴포넌트가 사실 맨 아래에 있는건데 z-index만 조작해서 위에 있는것처럼 보임)

 

의미적인 측면 뿐만 아니라 기능적으로도, 모달을 발생시켜야 하는 지점이 매우 깊은 곳이면, 그 상위요소들의 css에 모두 영향을 받는다. z-index가 다른 의존성 때문에 잘 안 올라가는 경우도 생길 수 있음.

 

(리액트 루트를 넘어) 최상단으로 모달같은 컴포넌트를 보내고 싶을 때 리액트의 portal기능을 쓴다.

 

 

1. html파일의 root요소에 portal을 열 부분들을 만든다. (backdrop-root나 modal-root)

<body>
    <div id="root"></div>
    <div id="backdrop-root"></div>
    <div id="modal-root"></div>
</body>

 

 

2. 백그라운드 Dim 요소와 모달 요소를 만든다.

const Backdrop = (props) => { //dim요소
  return <div className={classes.backdrop} onClick={props.onConfirm} />;
};
const ModalOverlay = (props) => { //모달의 내용
  return (
    <Card className={classes.modal}>
      <header className={classes.header}>
        <h2>{props.title}</h2>
      </header>
      <div className={classes.content}>
        <p>{props.message}</p>
      </div>
      <footer className={classes.actions}>
        <Button onClick={props.onConfirm}>Okay</Button>
      </footer>
    </Card>
  );
};

 

3. Modal을 발생시키는 요소를 만든다.

ReactDOM에 createPortal 메소드를 사용한다. (ReactDOM 라이브러리를 쓴다.)

 

ReactDOM.createPortal(렌더할 태그, HTML선택자[위치])로 컴포넌트를 portal 이동을 시킬 수 있다.

이를 이용해 최상위 루트 컴포넌트로 모달을 쏠 수 있다.

const ModalOverlay = (props) => {
  return (
    <React.Fragment> // createPortal(렌더할 태그, HTML선택자[위치])
      {ReactDOM.createPortal(<Backdrop onConfirm={props.onConfirm} />, document.getElementById("backdrop-root")}
      {ReactDOM.createPortal(<ModalOverlay onConfirm={props.onConfirm} title={props.title} message={props.message} />, document.getElementById("overlay-root")}
    </React.Fragment>
  );
};

export default ErrorModal;

 

 

'FrontEnd > React' 카테고리의 다른 글

React) useReducer란?  (0) 2023.10.23
React) useRef란?  (1) 2023.10.22
React) JSX가 처리되는 과정  (1) 2023.10.22
React) 메모이제이션  (0) 2023.10.17
React) Key Props를 사용하는 이유  (0) 2023.10.17
'FrontEnd/React' Related Articles more