React createPortal(Modal Component)

# 문제점

모달을 컴포넌트로 만들고 상태 공유를 위해 부모 컴포넌트에 작성 시 문제 야기

• 상위 컴포넌트의 필요없는 스타일 반영
• 최상위로 띄우기 위해 무분별한 z-index 사용

//Another.tsx
<ParentDiv>  <--- 해당 부모의 영향을 받으며 z-index가 얼마나 필요한지 생각 필요
	<Modal />
<ParentDiv/>

//Modal.tsx

const Modal = ({ open, handleClose, children }) => {
  const contextValue = { open, handleClose };
  return (
    <ModalContext.Provider value={contextValue}>
      {open && (
            <ModalWrap>
              <ModalBackDrop onClick={handleClose} />
              <ModalContent>{children}</ModalContent>
            </ModalWrap>
        )}
    </ModalContext.Provider>
  );
};

# createPortal(children, domNode, [key])

컴포넌트를 root가 아닌 DOM의 다른 부분에 렌더링

DOM 노드의 물리적 배치만 변경하므로 상위 컴포넌트의 React 구성 요소의 하위 컴포넌트로 구성

그러기에 자식은 부모가 제공하는 컨텍스트, 상태, 이벤트에 액세스 할 수 있다.

const Modal = ({ open, handleClose, children }) => {
  const contextValue = { open, handleClose };
  return (
    <ModalContext.Provider value={contextValue}>
      {open &&
        createPortal(
            <ModalWrap>
              <ModalBackDrop onClick={handleClose} />
              <ModalContent>{children}</ModalContent>
            </ModalWrap>,
          document.body,
        )}
    </ModalContext.Provider>
  );
};

# 매개변수

• children : React Component
• domNode : 존재하는 DOM 노드(document.body, document.getElementById()...)
• key[optional] : Portal Key로 고유한 문자열 또는 숫자 입력

# 주의

• 이벤트 버블링으로 인해 온전한 포커스 관리 필요
  예를들어 ParentDiv에 onClick 이벤트 작성 시 Modal에서도 작동

...
<ParentDiv onClick={() => alert('Event Bubbling')}>
	createPortal(
		<Modal />
		,document.body
	)
<ParentDiv/>
...