React.Portals

React.Portals?

주요 사용처

• 모달 창 및 파업 창

• 툴팁 및 드랍다운

• 컨텍스트 메뉴

• 전역 알림 및 메시지

그래서 왜 쓰는거임?

• DOM 트리 외부에 렌더링: 부모 컴포넌트의 DOM 트리와는 다른 위치에 렌더링할 수 있다.

• 스타일 충돌 방지: 부모 컴포넌트의 스타일이나 레이아웃에 영향을 받지 않는다.

• UI 요소의 위치 지정: 모달, 팝업, 툴팁, 드롭다운, 컨텍스트 메뉴, 전역 알림 등의 요소를 쉽게 원하는 위치에 렌더링할 수 있다.

대표적인 예시 - 모달창

ReactDom.createPortal(child, container)

• ReactDom의 createPortal 메서드를 이용해서 원하는 컴포넌트를 Portal 시킬 수 있다.

• 첫 번째 인자는 엘리먼트, 문자열, 혹은 fragment같은 어떤 종류이든 렌더링 할 수 있는 React의 자식이 들어간다.

• 두 번째 인자는 DOM element가 들어간다. 이 두번째 인자에 아래에 index.html 에서 작성한 div 요소가 들어간다.

적용

• index.html에 다음을 삽입

    <div id="root"></div>
    // root div 요소 아래에 삽입해주자~
    <div id="root-portal"></div>

• Modal

import { createPortal } from 'react-dom'

const Modal = () => {

const $portal_root = document.getElementById('root-portal')

  return (
    <div>
      createPortal(<Modal {...modalState} />, $portal_root)
    </div>
  )
}

export default Modal