React Portal

Study Date

Dec 23, 2023 09:29 AM

Status

In progress

Tags

부모(container)노드 안으로 자식 노드를 넣게 해주는 것


ReactDOM.createPortal(child, container)

child: 엘리먼트, 문자열, fragment처럼 렌더링할 수 있는 것

container : DOM 엘리먼트

사용 예시1


...
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

React는 새로운 div를 생성하지 않고 `domNode` 안에 자식을 렌더링함

`domNode`는 DOM 노드라면 어떠한 것이든 유효하고, 그것은 DOM 내부의 어디에 있든지 상관 없음

사용예시2


	const el = useMemo(()=>document.createElement('div'),[])
	useEffect(()=>{
		document.body.appendChild(el)
		return ()=>{document.body.removeChild(el)}
	})
	
..
  return ReactDOM.createPortal(
    <BackgroundDim>
      <ModalContainer>hi</ModalContainer>
    </BackgroundDim>,
    el
  );
}

⇒ 모달(엄밀히 말하면 모달+불투명 백그라운드)이 최상단 요소에 위치하게 됨