react 모달 배경 클릭 시 창 닫기

react를 사용하지 않고 javscript로 구현시

1. 모달 배경에 eventListener를 달고
2. 모달 배경에 속한 모달창엔 모달창의 id또는 class 이름을 넣은 다음
3. event.target.closest 메서드를 이용해서 모달창의 아이디가 찾아지는지 아닌지를 판단 후 배경이 클릭된 것을 파악했다.

• 모달이 찾아진다면 모달에 속한 부분을 클릭한 것(이벤트 캡쳐링)
• 모달이 찾아지지 않는다면 모달이 속하지 않은 부분을 클릭한 것(배경)

react에선 ref를 박아서 event.target과 직접 비교하는 방식으로 구현할 수 있다

const backgroundRef = useRef<HTMLDivElement>(null);

const handleClickBackground = (e: React.MouseEvent<HTMLDivElement>) => {
  if (e.target === backgroundRef.current) {
    handleCancel();
  }
};

<ModalBackground ref={backgroundRef} onClick={handleClickBackground}>
  <Modal />
</ModalBackground>