overlay.open

overlay.open은 경고창(Alert) 또는 알림(Notification)과 같은 오버레이를 열기 위해 사용해요.

이 함수는 오버레이의 상태와 제어를 위한 유틸리티를 제공해요.

const overlayId = overlay.open(controller, options);

레퍼런스

overlay.open(controller, options?)

오버레이를 열 때 overlay.open을 호출하세요.

overlay.open(({ isOpen, close, unmount }) => {
  return <Alert isOpen={isOpen} close={close} onExit={unmount} />;
});

매개변수

• controller: 오버레이 컨트롤러 함수예요. 오버레이를 렌더링할 JSX를 반환하며, 오버레이의 상태와 제어 함수들을 매개변수로 받아요.
  • isOpen: 오버레이가 열렸는지 여부를 나타내는 값이에요.
  • close: 오버레이를 닫는 함수예요.
    오버레이 닫기 애니메이션 등을 보여주기 위해서 오버레이 정보는 메모리에 계속 남아있어요. 이것을 완전히 제거하려면 unmount 함수를 호출하세요.
  • unmount: 오버레이를 제거하는 함수예요.
    오버레이 닫기 애니메이션이 있을 때 unmount를 바로 호출하면 오버레이가 닫히기 전에 컴포넌트가 제거되어 애니메이션이 제대로 표시되지 않을 수 있어요.
• optional options: 오버레이를 열 때 추가 정보를 전달받는 객체예요.
  • overlayId: 오버레이를 열 때 고유한 ID를 지정해요. 이 ID는 오버레이를 식별하는 데 사용돼요.

반환값

오버레이의 고유한 ID를 문자열로 반환해요. 만약 overlayId를 지정하지 않았다면 랜덤한 문자열이 반환돼요.

주의사항

수동으로 ID를 지정할 때는 다른 오버레이와 중복되지 않도록 주의하세요. 중복된 ID로 여러 오버레이를 열면 의도치 않은 동작이 발생할 수 있어요.

사용법

오버레이 열기

아래 예시는 경고창(Alert)을 열고 닫는 간단한 사용법을 보여줘요.

overlay.open(({ isOpen, close, unmount }) => {
  return <Alert isOpen={isOpen} close={close} onExit={unmount} />;
});

고유한 ID를 가진 오버레이 열기

고유한 ID를 지정하면 특정 오버레이를 식별하거나 특정 오버레이를 닫을 때 유용해요.

const overlayId = 'unique-overlay-id';
 
overlay.open(
  ({ isOpen, close, unmount }) => {
    return <Alert isOpen={isOpen} close={close} onExit={unmount} />;
  },
  { overlayId }
);