[MUI] 모달 컴포넌트 외부클릭 조절하기

MUI의 Modal 컴포넌트는 해당 div 외부 클릭시에 닫히는 기능이 지원되는데, 해당 기능을 컨트롤 하려고 한다.

 

일단, Modal

<Modal open={isToggle} onClose={onClose}>

open은 열고 닫기를 조절하는 state이고,(bool)

onClose는 모달이 닫힐때 실행하는 함수이다.

보통은 내용 초기화 등을 진행하였다.

 

그러나 외부 클릭을 조작하려면 일단, onClose에 매개변수를 하나 더 받아야 한다.

<Modal open={isPiggeryToggle} onClose={(_, reason) => onClose(reason)}>

이렇게 넘겨주고 함수 작성하기.

 

type CloseReason = "backdropClick" | "escapeKeyDown" | "closeButtonClick";

const onClose = (value: CloseReason) => {
    // 뒷배경 클릭이나 esc 키로는 닫기가 작동하지 않도록
    if (value === "backdropClick" || value === "escapeKeyDown") {
      return;
    } else {
      setIsToggle(false)
    }
  };

이렇게 작성해서 예외처리 해주면 끝!