[팀 미팅 질문] React Portal

최종 수정 : 2024-06-04

React Portal

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. React 라이브러리에서 제공하는 기능 중 하나로, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 해준다. 이 기능을 사용하면 컴포넌트의 렌더링 결과를 다른 DOM 노드로 이동시킬 수 있다.

ReactDOM.createPortal(child, container)

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

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

 

Q. 사용하는 이유

리액트는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 렌더링 되는 Tree 구조를 갖고 있다. 부모-자식 관계를 가지고 있어 DOM 계층 구조에 영향을 미친다. 하지만 React Portal를 사용하면 독립적인 위치에서 렌더링하게 된다. 다시 말해, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다. 이 덕분에 스타일링이 편해진다. overflow: hidden, z-index 와 같은 속성들을 부모 컴포넌트에 영향을 받지 않고 사용할 수 있는 것이다. 즉, 스타일링을 간편하게 사용 가능하고 이런 독립된 스타일링은 유지 보수성을 향상시키고 CSS 충돌을 방지한다.

 

장점

# 유연한 구성

컴포넌트를 다른 DOM 위치로 이동시키기 때문에 UI 구성을 더욱 유연하게 할 수 있다. 예를 들어, Modal을 구현할 때는 모달 컴포넌트를 최상위 컴포넌트의 자식으로 추가해야 하지만, React Portal을 사용하면 모달 컴포넌트를 원하는 위치로 이동시킬 수 있어 복잡한 UI 구성도 쉽게 구현할 수 있다.

 

# 성능 최적화

컴포넌트의 렌더링 결과를 다른 DOM 위치로 이동시키는 기능을 제공하므로, 컴포넌트의 렌더링이 최적화될 수 있다. 예를 들어, 상위 컴포넌트에서 자식 컴포넌트를 렌더링하면서 상태(State)를 변경하면 해당컴포넌트와 그 자식 컴포넌트가 모두 재렌더링된다. 하지만 React Portal을 사용하면 해당 컴포넌트와 그 자식 컴포넌트 중에서 변경한 부분만 렌더링되므로, 불필요한 렌더링을 최소화 할 수 있다.

 

사용 시점

Portal은 React 생명주기와 밀접한 연관이 있기 때문에 기존 DOM를 다루는 JavaScript 라이브러리와 함께 사용할 때 유용하게 사용하거나 Modal과 같은 기능을 구현할 때 활용할 수 있다.

 

# 모달(Modal) dialog

모달 창은 일반적으로 최상위 컴포넌트의 자식으로 추가된다. 하지만 React Portal을 사용하면 모달 창을 다른 위치로 이동시킬 수 있으므로, 보다 유연하고 복잡한 UI 구성도 쉽게 구현할 수 있다.

 

# 포탈(Portal)

일반적으로 다른 웹 페이지로 이동하는 링크를 클릭할 때, 새로운 브라우저 탭이나 창을 열어서 해당 페이지를 보여주는 기능을 뜻한다.

---

참고 자료

https://velog.io/@jerrychu/React-React-Portal-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0%EC%99%80-%EB%B0%A9%EB%B2%95

[React] React Portal 사용 이유와 방법

https://hyebeen2658.tistory.com/16

React Portal이란?

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/#portal-vs-render

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