[React] Portal 이란?

Intro

React Portal 에 대해 알아보도록 하자. 보통 Portal 이라고 하면, 다른 곳으로 이동시킨다는 개념을 포함하고 있다. React Portal 역시 이와 유사한 개념을 가지고 있다고 생각하면 된다.

What is a Portal

컴포넌트를 부모 컴포넌트의 바깥에 렌더링해준다. 즉 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 할 수 있는 최고의 방법이라고 할 수 있다.

tree의 부모를 하나 더 만들어 서로 독립적인 흐름을 제어할 수 있게 만드는 것이다.

Reasons for Use

일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때때로 이런 tree구조가 불편함을 가져다주기도 한다.

분명 부모-자식 관계를 가지고 있지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야한다. 이러한 상황에서 portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있다면, z-index 등 부모 컴포넌트의 제약에서 벗어날 수 있다.

https://ko.reactjs.org/docs/portals.html
https://dev-bomdong.tistory.com/m/21
https://yunsuu.github.io/portal/