Post

Portal을 사용하여 Modal 띄우기

Posted
By Dain Kang
1 min read

ReactDOM에서 제공하는 createPortal을 사용하여 #root 외부에서 모달을 띄울 수 있다.

DOM에 modal 요소 생성

#root 형제 요소로 #modal을 추가한다.

1
2
3
4

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

ModalPortal 컴포넌트 생성

1
2
3
4
5
6
7
8

import ReactDOM from "react-dom";

const ModalPortal = ({ children }: { children: JSX.Element }) => {
    const modalRoot = document.getElementById("modal")!;
    return ReactDOM.createPortal(children, modalRoot);
};

export default ModalPortal;

실제로 띄울 모달 컴포넌트를 생성한다.

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 React, { useRef, useEffect } from "react";
import {
  Container,
  ModalWrap,
  Content,
  Title,
  ButtonWrap,
  Button,
} from "./styled";

const Modal = ({ title, contents, handleClickCloseButton }) => {
  const modalRef = useRef(null);

  return (
    <Container ref={modalRef}>
      <ModalWrap>
        <Content>
          {title && <Title>{title}</Title>}
          {contents && contents}
        </Content>
        <ButtonWrap>
          <Button onClick={handleClickCloseButton}>닫기</Button>
        </ButtonWrap>
      </ModalWrap>
    </Container>
  );
};

export default Modal;

모달 사용하기

모달을 사용할 컴포넌트에서 ModalPortal안에 Modal을 넣어 사용한다.

1
2
3
4
5
6
7
8
9
10
11

{
  isOpenModal && (
    <ModalPortal>
      <Modal
        title="제목"
        contents="내용"
        handleClickCloseButton={() => setIsOpenModal(false)}
      />
    </ModalPortal>
  );
}


https://velog.io/@velopert/react-portals
Portals

React
react modal
This post is licensed under CC BY 4.0 by the author.