[React] Portals에 대해서

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공한다.

한마디로, 부모 컴포넌트 DOM 트리로부터 벗어난다는 말이다.

Portals – React

보통 컴포넌트 렌더링 메서드에서 엘리먼트를 반환할 때 그 엘리먼트는 부모 노드에서 가장 가까운 자식으로 DOM에 마운트 된다. 그런데 가끔 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 수 있다. portal의 전형적인 사용 예시는 부모 컴포넌트에 overflow: hidden이나 z-index가 있는 경우이지만, 시각적으로 자식을 튀어나오도록 보여야 하는 경우다.

ex) 다이얼로그, 호버카드나 툴팁

 

📌 사용 방법

다이얼로그로 포털 사용하는 것을 실습해볼 것이다.

일단, index.html 파일의 root 밑에 portal도 만들어준다.

 

다음으로 Portal 컴포넌트를 만들어 다이얼로그를 Portal 컴포넌트로 감싸준다.

cretaePortal -> 부모 컴포넌트 DOM 트리로부터 벗어나기

 

👇 Portal 컴포넌트 정의하는 법

ReactDOM.createPortal(child, container)

첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링 할 수 있는 React 자식이며

두 번째 인자(container)는 DOM 엘리먼트이다.

ThankyouDialog의 Open 버튼을 누르면 아래 하하하 버튼은 가려져서 보이지 않는 것을 볼 수 있다.

만약 아래처럼 Portal 컴포넌트로 감싸주지 않았다면 하하하 버튼이 보인다.

 

📌  Portal을 통한 이벤트 버블링

portal이 DOM 트리의 어디에도 존재할 수 있다 하더라도 모든 다른 면에서 일반적인 React 자식처럼 동작한다. context와 같은 기능은 자식이 portal이든지 아니든지 상관없이 정확하게 같게 동작한다. 이는 DOM 트리에서의 위치에 상관없이 portal은 여전히 React 트리에 존재하기 때문이다.

이벤트 -> Portal에 있더라도 Event는 트리로 전파

 

open 버튼을 누르나, 하하하 버튼을 누르나 console.log가 찍히는 것을 볼 수 있다.