🎯 Portal로 모달창 만들기
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
부모 컴포넌트 DOM 계층 구조에 종속되지 않으면서 DOM 계층 밖에 존재하는 다른 DOM node로 자식 컴포넌트를 렌더링할 수 있게 해주는 것이 portal이다.
portal은 리액트 v16 에서 도입된 기능이다.
ReactDOM.createPortal(자식컴포넌트, 새로 들어갈 DOM 위치)이 때, 새로 들어갈 DOM의 위치는 #root가 아닌 것이 포인트다.
<html>
<body>
<div id="root"></div>
** <div id="modal-root"></div>**
</body>
</html>Portal의 전형적인 용례
- 다이얼로그, 호버카드나 툴팁, 모달
Portal을 통한 이벤트 버블링
-
portal 은 DOM 트리에 어느곳에서나 있을 수 있지만, 일반적인 React의 하위 컴포넌트들처럼 작동한다. 즉, portal 내부에서 시작된 이벤트는 DOM 트리의 조상이 아니더라도 포함되는 React 트리의 조상에게 전파된다.
-
예를들어 모달 컴포넌트를 렌더링 하면 부모 요소는 Portal 를 사용하여 구현되었는지 여부에 관계없이 이벤트를 캡쳐할 수 있다.
styling
-
DOM 트리에서는 그 상위가 아니라 하더라도 portal 내부에서 발생한 이벤트는 React 트리에 포함된 상위로 전파된다.
-
예를 들어 모달을 소환한 부모 컴포넌트가 지니고 있던 스타일들이 그대로 전달받는다.
정리
- Portal 를 사용하여 불필요한 스타일을 상속받는 문제를 해결할 수 있다.
- 엘리먼트의 레이어 위치를 관리하는 z-index 스타일을 관리 할 때 유용하게 사용 될 수도 있다.
- 부모 DOM에 종속되지 않는 위치에서도 자유자재로 렌더링 할 수 있다.
💭 What I learend from this...
한 컴포넌트에서만 소비되는 모달이 아니라 여러 곳에서 사용될 수 있는 모달창을 구현하였다.
처음에는 children 개념이 생소해서 reusable component 또한 어리둥절 하였지만, 이제사 내가 리액트를 쓰는 중이구나 싶었다!
상대적으로 최근에 나온 추가된 문법이라 그런지 다른 방식으로 만들어진 모달 자료는 많았지만 portal을 써서 모달창을 구현하는 것이 가장 심플하고 논리적으로 보였다.
항상 신기한거 알고 계셔서 많이 배워요 최신문법 portal...😎🧐💯