[SUI] 백드롭 누르면 Dialog 닫히게 하기

SUI를 구현하는 중 백드롭을 눌렀을 때 닫히게 하는 Dialog를 만들었어야 했다.

누가봐도 ref를 사용해야 할 것 같은 분위기에 기선제압 당함...

해도해도 잘 모르겠는 ref,,

포스팅 시작!

Ref 이용하여 백드롭 누르면 Dialog 닫히게 하기 구현

내가 생각해서 해보려했는데,, 도무지 어떻게 구현할지가 떠오르지 않았다.

무한 구글링을 하여, 하나의 방법을 찾았다.

로직은 다음과 같다

1. 마우스를 클릭하면 그 마우스의 위치를 반환함
2. 마우스의 위치가 컴포넌트가 아니라면? Dialog를 닫음

끝!

하.. 직접 구현할 땐 어려워 보였는데 이렇게 작성하니 진짜 쉬워보이넷..

각 단계마다 설명 붙이며 구현 스타트!

마우스를 클릭하면 그 마우스의 위치를 반환함

    React.useEffect(() => {
      document.addEventListener('mousedown', closeHandler);
      return () => {
        document.removeEventListener('mousedown', closeHandler);
      };
    }, []);

useEffect를 사용하여 처리하였다.

컴포넌트가 렌더링 되면 EventListner에 등록을 하고, 없어지면 EventListener가 다시 지워지는 역할!

처음에 이것만 보고 도대체 return을 왜 해주는지 몰라서 GPT 선생님께 여쭤봤었다..

만약 return을 쓰지 않는다면 중복해서 계속 이벤트 리스너가 추가될 수 있다는 거였다!

closeHandler

    const closeHandler = (e: any) => {
      if (!popupRef.current?.contains(e.target)) {
        setOpen(false);
      }
    };

closeHandler에는 내 위치(e.target)이 아니면 setOpen을 false 해주었다.

Ref 연동

    const popupRef = React.useRef<HTMLDivElement>(null);

   <div className={dialogClass} ref={popupRef} {...props}>

마지막! dialog에 ref 연동해주기!