[React] Portal로 색다른 모달 만들기

jhj46456·2020년 8월 19일
0

소개

React에서 모달을 만드는 방법은 두 가지가 있습니다.

  1. #root 내부에 만드는 방법
  2. 외부 DOM 노드로 렌더링하는 방법

portals 문서에서는 외부 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 라고 적혀있는데,

#root 내부에 있다고 무조건 안좋은 방법은 아닙니다. 애니메이션이 존재할 때 성능 저하 이슈가 있다고는 합니다만.

최적화는 개발 종료 후 진행하는 것이 바람직하다고 생각합니다. (일단 완성부터 어떻게...)

기존의 모달

필자는 지금까지 이런 방식으로 모달을 만들어왔습니다.

버튼까지 구현은 안함.

기본 설정된 #root에 모달이 들어가는 방식.

Portal

📌 https://ko.reactjs.org/docs/portals.html

Portal을 사용하기 위해서는 먼저 index.html에 모달이 보여지는 공간을 하나 만들어야 합니다.

모달에 들어갈 내용을 만들어줍니다.

props.children으로 자식들을 모두 가져와서 React.createPortal으로 (내용물, 렌더링 위치)를 입력해줍니다.

App에서는 Modal 컴포넌트 내부에 Content를 넣어줍니다.

결과는 기존 모달과는 다르게 #root가 아닌 위치에 모달이 들어가있음을 알 수 있습니다.

0개의 댓글