모달창 밖 클릭시 닫기

e.target과 e.currentTarget의 차이점

currentTarget : 이벤트 리스너가 달린 요소
target : 실제 이벤트가 발생하는 요소

<div className={styles.modalWrap} onClick={handleModal}>
  <div className={styles.modalBox} ref={BG}> ... </div>
</div>

위 코드에서 e.target과 e.currentTarget을 찍어보면
currentTarget은 어딜 눌러도 modalWrap이 나오고
target은 modalBox나 다른 요소들이 나온다

클릭한 요소가 ref에 포함되어있지 아닌지 알아야 하는
상황에서는 target을 쓰는 게 맞는 것 같다

// 1번
console.log(!BG.current?.contains(e.currentTarget))
// 2번
console.log(!BG.current?.contains(e.target))

1번은 항상 false만 나오고
2번은 요소에 따라 내가 원하는 값이 나온다

target 요소는 이벤트 버블링에 의해
div.modalBox는 div.modalWrap의 이벤트를 위임받아 이벤트를 사용할수 있는 것,
그에 따라 div.modalBox 정보를
div.modalWrap에 걸린 addEventListener에 전달 하게 된 것

React.MouseEvent ㄴㄴ
React.을 지우면

이런 에러가 난다

import { MouseEvent } from 'react'

import 후
MouseEvent ㅇㅇ

달력컴포넌트에서 달력칸을 클릭하면 모달창이 열린다

모달컴포넌트
document에 이벤트리스너를 달고 모달 밖을 클릭하면 닫히게 한다

여기서 잘못되었다
document 즉 body를 뜻하기 때문에 열리자 마자 닫히는 거다

그렇다면 다른 곳에 이벤트리스너를 달아주면 된다
아니면 이벤트의 종류를 다르게 해주면 된다
mousedown이라던지 mousedown 또는 mousedown....
(아직 사용할 줄 아는 이벤트종류가 없다.. ㅎㅎ)