원문 : https://blog.logrocket.com/build-modal-with-react-portals/
Using React Portals to build a modal | LogRocket Blog
Learn how to build a modal or overlay component in React with React Portals. Our demo is applicable for all top level components.
blog.logrocket.com
해당 연구 : https://sumo.com/stories/pop-up-statistics 에 따르면 모달은 사용자의 이목을 끄는데 효과적입니다.
하지만 모달은 만들기 어렵습니다.
z-index, 레이어, 돔 계층 추적은 쉽지 않습니다.
따라서 오버레이나 툴팁도 만들기 어렵습니다.
React 앱에서 컴포넌트 혹은 엘리먼트는 가장 가까운 부모 노드의 자식으로 DOM에 마운트됩니다.
위에서 아래로의 표준 레이어 계층 구조는 다음과 같습니다.
root node => parent nodes => child nodes => leaf nodes
여기가 React Portal이 유리한 곳입니다.
React Portal은 컴포넌트 간의 부모-자식 관계를 손상시키지 않고,
기본 계층 외부에서 엘리먼트를 렌더링할 수 있는 기능을 제공합니다.
만들 컴포넌트
- ReactPortal: Portal을 생성하고 기본 계층 외부에 제공된 컨테이너의 콘텐츠를 렌더링하는 래퍼 컴포넌트.
- Modal: ReactPortal을 사용하여 렌더링할 JSX 콘텐츠가 있는 모달 컴포넌트.
- App : Modal 컴포넌트를 사용하고 활성 상태(열림 또는 닫힘)를 유지하는 위치.
리액트 포탈 만들기
- content: 모든 유효한 렌더링 가능한 React 요소
- containerElement: 콘텐츠를 추가할 수 있는 유효한 DOM 요소
ReactDOM.createPortal(content, containerElement);
왜 prepend가 아니라 append인가요? 왜 정적으로 미리 추가해두지 않나요?
<body>
<div id="root" />
<div id="portal-root" />
</body>동적인 wrapperId
- useEffect는 비동기적으로 실행됩니다.
- 효과가 동기식이어야 하고 DOM에 직접적인 변형이 있는 경우 useLayoutEffect를 사용합니다.
- 이것은 매우 드물기 때문에 일반적으로 useEffect가 가장 좋은 옵션입니다.
DOM을 직접 변경하고 DOM이 다시 칠해지기 전에 효과가 동기적으로 실행되기를 원하므로,
useLayoutEffect Hook을 사용하는 것이 더 합리적입니다.
클린업 함수
요소를 찾을 수 없는 경우 DOM을 직접 변경하고 본문에 빈 div를 추가합니다.
따라서 ReactPortal 컴포넌트가 마운트 해제될 때 동적으로 추가된 빈 div가 DOM에서 제거되도록 해야 합니다.
또한 정리 프로세스 중에 기존 컴포넌트를 제거하지 않아야 합니다.
완료된 모습
본문을 읽는것보다 코드를 한번 보는게 이해가 쉽습니다.
'FrontEnd' 카테고리의 다른 글
| The Difference Between VAC(View Asset Component) Pattern and Container/Presenter Pattern (0) | 2022.06.25 |
|---|---|
| 리액트 개발자를 위한 CSS Variable (0) | 2022.06.24 |
| Intersection Observer와 React.lazy로 성능 개선하기 (0) | 2022.06.21 |
| 리액트 쿼리 : 폼 (2) | 2022.06.20 |
| 리액트 쿼리 : 뮤테이션 (0) | 2022.06.20 |
