API유틸overlay.unmountAll

overlay.unmountAll

overlay.unmountAll은 열려 있는 모든 오버레이를 React 요소 트리와 메모리에서 완전히 제거하는 함수예요.

overlay.unmountAll();

레퍼런스

overlay.unmountAll()

특정 오버레이의 메모리를 해제할 때 overlay.unmountAll를 호출하세요.

overlay.unmountAll();

주의사항

  • 이 함수를 호출하면 즉시 메모리를 해제하기 때문에 오버레이 닫기 애니메이션이 보이지 않을 수 있어요.
  • 애니메이션이 있는 오버레이의 경우, overlay.closeAll을 호출하고 닫기 애니메이션이 끝난 후 overlay.unmountAll을 호출해야 자연스러운 사용자 경험을 제공할 수 있어요.

인터페이스

function unmountAll(): void;

사용법

자동으로 생성된 ID를 사용하는 경우

아래는 여러 개의 오버레이를 열고, overlay.unmountAll을 사용해 모두 제거하는 간단한 예제예요.

overlay.open(({ isOpen, close, unmount }) => {
  return <ConfirmDialog isOpen={isOpen} close={close} onExit={unmount} />;
});
overlay.open(({ isOpen, close, unmount }) => {
  return <ConfirmDialog isOpen={isOpen} close={close} onExit={unmount} />;
});
overlay.open(({ isOpen, close, unmount }) => {
  return <ConfirmDialog isOpen={isOpen} close={close} onExit={unmount} />;
});
 
// 위 세 개의 오버레이를 모두 닫습니다.
overlay.unmountAll();

애니메이션이 있는 경우

애니메이션이 적용된 경우에는 닫기 애니메이션이 끝난 후 overlay.unmountAll을 호출해야 자연스러운 사용자 경험을 제공할 수 있어요.

const overlayId = overlay.open(({ isOpen, close, unmount }) => {
  return <ConfirmDialog isOpen={isOpen} close={close} onExit={unmount} />;
});
 
overlay.closeAll();
 
setTimeout(() => {
  overlay.unmountAll();
}, 1000);