Portal

Portals

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

이 말은, 컴포넌트들의 상하 관계, 구조를 가지고 있는 문서인 DOM 상에서, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다.

---

ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다.

createPortal 메서드의 첫번째 파라미터 child를 통해 우리가 원하는 컴포넌트를 Portal에 집어 넣을 수 있다.

두 번째 인자 container는 이 Portal의 목적지를 뜻한다고 생각하면 된다. 우리가 child에 넣어둔 컴포넌트는 랜더링될 때, 가까운 부모 컴포넌트가 아닌 우리가 container에 설정해둔 컴포넌트에 렌더링되게 한다.

어디서 사용하는 걸까?

공식 문서

portal의 전형적인 유스케이스는 부모 컴포넌트에 overflow:hidden 이나 z-index 가 있는 경우이지만, 시각적으로 자식을 “튀어나오도록” 보여야 하는 경우도 있습니다. 예를 들어, 다이어로그, 호버카드나 툴팁과 같은것입니다

일단 주로 Modal, Tooltip 같이 뭔가 튀어나오는 요소에 사용된다. 위에서도 설명이 나오는데, 이런 컴포넌트들은 z-index, overflow:hidden 같은 부모 컴포넌트의 CSS에 방해받아 제 역할을 하기 힘들 수 도 있다.

그럴 때 Portal을 이용해 DOM 트리 상에서 부모 컴포넌트의 영향을 바지 않도록, 최상위 계층으로 옮김으로써 의도치 않은 CSS 상의 방해를 받지 않을 수 있습니다.

Portal 사용의 이유

modal이 독립적이지 않고 부모의 DOM 노드 안에서 렌더링 되는 것이 의미적인 관점이나 간결한 HTML

구조를 갖췄는지의 관점으로 보면 별로 좋지 않기 때문이다.

왜냐, 기본적으로 모달은 페이지 위에 표시되는 오버레이이기 때문이다. 모달은 전체 페이지에 대한 오버레이이기 때문에 당연히 다른 모든 것의 위에 있다. 그래서 모달이 만약 다른 HTML 코드 안에 중첩되어 있다면, 기술적으로 스타일링 덕분에 작동할지 몰라도 좋은 코드가 아니고 좋은 구조 도한 아니게 된다.

예를들어 스크린 리더가 렌더링 되는 HTML 코드를 해석할 때 일반적인 오버레이라고 인식하지 못할 수도 있다. 또한 의미적인 관점이나 구조적인 관점으로 보면 이것은 HTML 코드 안 깊은 곳에 자리잡고 있기 때문에 이 모달이 다른 모든 내용에 대한 오버레이인지 명확하지 않다. 그래서 리액트 개념에서 오버레이 내용이 있는 모달이 깊게 중첩되면 안 되는 문제를 해결할 수 있게끔 한 방법이 React Potal인 것이다.

 

참조

https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/

[React] Portal, Render의 차이점, 활용방안 알아보기!

 

https://medium.com/hcleedev/web-react-portal-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-f00a48157862

Web: React Portal 알아보기