<aside> 💡 페이지를 구성하다 보면 생각보다 많은 곳에서 모달과 팝업을 구현해야 하는 경우가 생긴다. React에서 모달을 구현하기 위해서는 모달 컴포넌트를 별도로 만들어 부모 컴포넌트에서 모달 컴포넌트를 선언해주는 방식으로 사용하게 되는데, 우리는 React에서 제공되는 기능인 React Portal을 추가하여 모달을 구현해주었다. React Portal을 알아보고 우리 프로젝트에는 어떤 식으로 Portal을 추가하여 구현했는지 알아보자.
</aside>
출처 : *https://medium.com/@vmslakshmi8000/portals-in-react-b9ef4ba812a4*
React Portal은 React 애플리케이션에서 DOM 요소를 다른 위치의 DOM 노드로 렌더링할 수 있게 해주는 기능이다. 일반적으로 React는 컴포넌트를 해당 컴포넌트의 부모 요소 내에서 렌더링 하지만 때로는 특정 컴포넌트를 부모 요소가 아닌 다른 위치로 렌더링해야 하는 경우가 생기는데, 이런 경우에 React Portal을 사용한다.
포털을 사용하여 독립적인 UI 요소를 렌더링할 수 있기 때문에 모달, 드롭다운 메뉴, 툴팁 등과 같은 보조적인 UI 요소를 렌더링할 때 사용할 수 있다.
https://ko.legacy.reactjs.org/docs/portals.html
https://react.dev/reference/react-dom/createPortal
<aside> ❓ 우리는 왜 Portal을 사용하여 외부에 존재하는 DOM 노드에 렌더링 하도록 만들어 주어야 하는걸까?
</aside>
리액트는 부모 컴포넌트가 렌더링 되면 자식 컴포넌트가 렌더링 되는 Tree 구조를 가지고 있다. 이런 Tree 구조는 종종 불편함을 가지게 되는데 부모-자식 관계를 가지고 있어 DOM 계층 구조에 영향을 미치게 된다. 하지만 리액트 포탈을 사용하면 독립적인 위치에서 렌더링하기 때문에 편리하게 사용이 가능하다.
독립적인 스타일 적용 (CSS 충돌 방지)
부모 컴포넌트 스타일에 영향을 받거나 줄 수 있기 때문에 별도의 후 처리가 필요하다. 이런 경우 Portal을 사용하면 부모와 자식 모두 외부의 스타일링 규칙에 영향을 받지 않고 독립적인 스타일링을 가능하게 해준다.
이벤트 버블링 제어
리액트 트리 구조에 따라 이벤트가 발생한 요소부터 최상단의 부모요소를 만날때까지 이벤트가 전파되기 때문에 이벤트 처리가 복잡해질 수 있다. 이 경우 Portal을 사용하면 내부에서 발생한 이벤트는 Portal을 사용하는 부모 요소까지만 버블링 되기 때문에 이벤트 처리를 더욱 효율적으로 관리할 수 있다.
<aside> 👇🏻 우리 프로젝트에서 적용한 코드를 바탕으로 어떻게 포털을 사용하여 모달을 구현할 수 있는지 알아보자!
</aside>
다른 DOM 요소에 대한 id를 지정하여 해당 요소에 포탈이 렌더링될 수 있도록 지정