React.createPortal( )

 

모달을 사용할 때 일반적인 HTML 구조를 살펴보면 다음과 같다.

 

페이지의 DOM 구조 내부에 모달이 있다.

 

분홍색 박스 = 모달 영역

 

 

 

그런데, portal을 사용하게 되면, DOM 구조 밖에 이 모달을 위치시킬 수 있다.

 

사용 방법

1. createPortal

export function createPortal(children: ReactNode, container: Element | DocumentFragment, key?: null | string): ReactPortal;

 

• createPortal(JSX, 위치 시킬 Node)

 

예시:

 

function Modal({children, onClose}) {
  return createPortal(<Overlay onClick={onClose}>
    <StyledModal>
      <button onClick={onClose}>X</button>
      <div>{children}</div>
    </StyledModal>
  </Overlay>, document.body);
}

 

 

다시 HTML 구조를 살펴보면, body의 바로 하위 요소로 모달이 이동된 것을 확인할 수 있다.

 

체크 표시 - 모달 위치 (body의 하위 자식 요소)

 

포털을 사용하면, 기본적으로 DOM 트리 내부에서 원하는 위치에 구성 요소를 렌더링 할 수 있음과 동시에 여전히 React Component Tree의 동일한 위치에 컴포넌트가 있는 것을 확인할 수 있다.

 

 

✨ 포털을 쓰면 얻게 되는 이점

1. 어디서든지 render할 수 있다.

- 가장 최상단에 위치해야 하는 컴포넌트가 있을 경우, 페이지 내부에 존재하는 어떤 컴포넌트의 스타일에도 영향을 받지 않도록 만들 수 있기 때문에 유용하다.

 

2.  overflow: hidden;  같은 CSS 충돌을 막을 수 있다는 점이다.

다른 개발자가 이 모달을 재사용하게 될 경우 다른 곳은 부모의 overflow:hidden; 속성에 의해 모달이 잘릴 수도 있다.

따라서 일부 컴포넌트의 영향을 받지 않게 하기 위해 DOM 외부에서 모달을 렌더링한다.

 

3. 재사용성이 좋다. (2번과 같은 이유로)

 

 

* References

https://react.dev/reference/react-dom/createPortal