React Portal로 모달 생성하기

리액트는 index.html에서 "root"라는 id를 가진 div에 App.js를 렌더링 시켜 사용자에게 보여줄 화면을 정의한다. 즉, 모든 리액트 컴포넌트/페이지가 root라는 컨테이너 안에 담기게 된다. 그런데 서비스를 만들다보면 modal, dialog, overlay 등 메인 컨테이너가 아닌 별도의 컨테이너에 내용을 담아야 하는 경우가 생긴다. 이 때 z-index만으로 화면을 구성해도 되지만, z-index에 대한 정의가 제대로 되지 않을 경우 원하는 결과가 나오지 않을 수 있다. 그래서 사용하는 것이 리액트의 Portal이다. Portals Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 1. Portal을 사용하지 않고..

2023.10.19