⚡️ Portal이란?
createPortal(children, domNode, key?)Portal은 DOM의 일부 자식을 다른 부분에 렌더링할 때 주로 사용한다.
Example
.red {
background-color: red;
}
.green div {
background-color: green;
}위와 같이 컴포넌트를 설정하고 Red 컴포넌트는 빨간색으로, Green 컴포넌트는 초록색으로 설정해두었다. 포인트는 Green 컴포넌트 안에 Red 컴포넌트가 들어있는 것! 이 때 css는 어떻게 적용이 될까?
위와 같이 Red 컴포넌트에도 Green 컴포넌트의 css가 적용된 것을 확인할 수 있다. 이 문제를 해결하기 위해선 Red 컴포넌트를 root DOM에서 빼내야 한다.
const root = ReactDOM.createRoot(document.getElementById("root"));
const root2 = ReactDOM.createRoot(document.getElementById("dialog"));📁 main.js 파일에서 Red 컴포넌트를 렌더링할 새로운 DOM을 하나 더 만든다. 이 새로운 DOM에 렌더링되는 컴포넌트들은 📁 index.html에서 "dialog"라는 id를 가진 div 영역에 표현된다.
따라서 Green 컴포넌트는 root에, Red 컴포넌트는 root2에 렌더링하면 위 문제가 해결된다❗️ 부모 컴포넌트의 스타일에 전혀 영향 받지 않게 된다.
하지만 이렇게 되면 컴포넌트 구조 자체도 변경되고, 개발자의 본래 의도와도 멀어지게 된다. 이 때 🌟createPortal🌟을 사용한다.
createPortal() 을 사용하여 위와 같이 적용하면 다음과 같은 모습이 된다.
덕분에 Green 컴포넌트 안에 Red 컴포넌트가 들어가있는 전체적인 구조가 유지된다. 따라서 다른 DOM에 렌더링되지만 Red 컴포넌트에서 발생한 이벤트는 컴포넌트 트리 이벤트 원리에 맞게 이벤트가 버블링되어 올라가 Green 컴포넌트에도 영향을 준다.
⚡️ 마무리하며
createPortal()이 가진 특성을 생각해보면 여러 곳에서 사용될 수 있는데, 우리 프로젝트에 적용할 만한 부분을 생각해보면 모달 창을 구현하는 부분이 있을 수 있겠다.
Portal을 통해 한 컴포넌트 안에서만 다뤄지는 모달 창이 아니라, 여러 컴포넌트의 상태에 따라 제어할 수 있는 모달 창으로 적용할 수 있겠다.
Reference
👩🏻🏫 [리액트 2부] 고급 주제와 훅
https://www.inflearn.com/course/리액트-고급주제와-훅-2부
📄 React 공식 문서: createPortal-React
https://ko.react.dev/reference/react-dom/createPortal
0개의 댓글
