[React] ReactDom.createPortal()

프론트엔드 개발 과정 중 로그인 및 다양한 기능을 위해 모달을 만들어야 할 필요가 있었다.

 

처음에는 모달을 정의한 뒤, 상위 컴포넌트 및 페이지에서 임포트하여 사용하면 되겠다고 생각했다. 그러나 모달의 z-index를 아무리 높여도 모달보다 위에 나타나는 부분들이 존재했다.

 

이 문제의 원인은 모달의 z-index가 아무리 높아도 모달을 사용하는 부모의 z-index가 다른 컴포넌트보다 낮으면 의미가 없다는 것이었다. z-index는 같은 스태킹 컨텍스트 내에서만 작동하기 때문에, 모달의 부모 요소가 낮은 z-index를 가지고 있다면, 모달의 z-index가 높더라도 다른 높은 z-index를 가진 형제 요소들보다 뒤에 나타날 수 있다.

 

문제를 해결하기 위해 position을 absolute로 설정하거나 다른 여러 시도를 해보았지만, 해결되지 않았다. 그러던 중, ReactDOM.createPortal()이라는 메소드를 사용하면 기존의 DOM 구조와 별개로 렌더링할 수 있다는 것을 알게 되었다.

 

ReactDOM.createPortal()을 사용하면 모달을 현재 컴포넌트 트리의 다른 부분에 렌더링할 수 있으며, 이를 통해 모달이 상위 z-index를 가지는 별도의 DOM 노드로 이동할 수 있다. 이렇게 하면 모달이 항상 최상위 레벨에서 렌더링되어 다른 모든 컴포넌트보다 위에 나타나게 된다.

 

따라서 문제를 해결할 수 있었지만, 이 방법은 기존의 DOM 구조를 깨뜨리는 것이므로 모달이 모든 컴포넌트보다 항상 위에 존재해야 한다는 점을 고려해야 한다.