Portals
ReactDOM.createPortal(child, container)child: element, String, fragment 등 rendering 가능한 React child 요소
container: DOM element
React는 보통 render()에서 새로운 div를 부모 노드에서 가장 가까운 자식으로 'DOM 안'에 마운트하고 element들을 렌더링한다. 하지만 가끔 DOM의 다른 위치에 삽입하는게 유용할 때가 있다. (ex. Modal 컴포넌트 등)
portal 사용에서의 주의점 1: keyboard focus 관리!
React app에서는 runtime동안 계속 HTML DOM이 변경되기 때문에, 가끔 keyboard focus를 잃거나 예상치 못한 element에 focus되곤 한다.
(ex. Modal이 닫힌 후에 Modal을 열었던 버튼으로 다시 focus 해주기)
React에서 focus를 지정하려면 DOM element에 ref를 사용한다.
이에 대한 자세한 내용은 React 공식 Docs를 참고하자.(class형 컴포넌트로 설명이 되어있다.)
portal 사용에서의 주의점 2: modal dialog에서 WAI-ARIA Modal Authoring Practices에 따른 상호작용 여부 확인
이 부분은 이해를 아직 잘 못해서
WAI ARIA Practices를 참고하길 바란다.
portal의 전형적인 use case
부모 컴포넌트에 {overflow: hidden} 이나 {z-index}가 있는 경우
시각적으로 자식을 '튀어나오도록' 보여야 하는 경우
(ex. modal dialog, hovercard, tooltip)
portal을 통한 event bubbling
portal은 context와 같은 기능을 통해 DOM트리의 어느 곳에서라도 일반적인 React의 자식요소로써 동작한다. portal은 DOM트리에서의 위치에 상관없이 React트리에 존재하기 때문이다.
따라서 portal내부에서 발생한 이벤트는 DOM트리에서의 상위가 아니더라도 React트리에 포함된 상위로 전파된다. 이 특성을 통해 portal에 의존하지 않는 추상화 개발이 가능해진다.
(ex. 컴포넌트를 렌더링할 때 부모 컴포넌트는 Modal이 portal을 사용했든, 안했든, Modal 내부의 이벤트를 포착할 수 있다.)
Reference: React Docs - Portals
