[react]Modal Portal(feat. typescript)

모달이 뜨면 background가 짙어지는 backdrop 효과가 모든 컴포넌트에 적용되지 않던 문제를 해결했다!

멘토님께 여쭤보니, 역시나 모달의 레벨이 적용되지 않던 컴포넌트(헤더, 사이드바)보다 낮아서 생긴 문제였다.

멘토님이 추천해주신 방식은 Modal Portal을 이용하는 것이였다! 나는 text editor을 열심히 만지던 중이라 팀원분께서 적용해주셨는데!

결과는 성공! 야호 ㅜㅜ 속이 아주 시원했다~!! 

나중에 쓰일 것 같아 팀원분이 성공하시고 난 후 적용 과정에 대한 설명을 들었고, 이를 이해한 바탕으로 기록해보자!

---

public/index.html에 'root' div하단에 modal portal을 위한 'modal-box'라는 이름의 div를 생성해준다. 이로써 modal component의 레벨이 root와 동일해지도록 한다. 이렇게 하면 modal component의 레벨이 그 어떤 컴포넌트보다도 높아, 모든 컴포넌트에 modal 백드롭을 적용할 수 있게 된다.

다음으로는 ModalPortal.tsx 파일을 만들어준다. children은 modal portal로 감싸줄 컴포넌트가 된다.

import { ReactNode } from "react";
import ReactDom from "react-dom";

interface Props {
  children: ReactNode;
}

const ModalPortal = ({ children }: Props) => {
  const el = document.getElementById("modal-box") as HTMLElement;

  return ReactDom.createPortal(children, el);
};

export default ModalPortal;

이처럼 사용할 모달의 겉 부분을 ModalPortal 태그로 감싸주면 모든 컴포넌트에 정상적으로 백드롭 효과가 적용된다.

<ModalPortal>
   <MatPostRead
       closeModalHandler={closeModalHandler}
       selectedPost={selectedPost}
   />
   <ModalBackdrop onClick={closeModalHandler} />
</ModalPortal>

추후에 사용할 수도 있으니 backdrop css 코드까지 기록해두자.

const ModalBackdrop = styled.div`
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
`;

 

 

참고 링크

https://velog.io/@y_jem/react-modal-Portals%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[react] modal Portal로 사용하기