Unable to preventDefault inside passive event listener invocation - 에러

passive 이벤트 리스너 동작안에서 preventDefault를 사용할 수 없다.

갑자기 이런 에러가 나왔다. Passive Event Listender 가 무엇일까? 아니 passive가 무슨 말이지 ? 

JS 바이블 MDN에서 검색을 해봤다. 

그러니까 저런 에러가 나는 이유는 저기 기본값이 true로 되어있는 이벤트들 중에서 내가 preventDefault( )를 호출했거나,

preventDefault( )를 이상하게 쓴것임을 알수 있었다. 

 

에러를 막아보겠다고 저렇게 쓸데없는 preventDefault()를 박은 과거의 내가 보인다. 

 

체크박스를 클릭하면 에러가 나질 않고, 체크박스로 감싸진 Text를 클릭하면 저렇게 에러가 나는걸 발견하였고..

그런데 내가 생각했던 그 passive 속성이 default로 true로 되어있다던 Event를 내가 쓴적없는데.. ? 

그래서 어떻게 해결해야하나 검색해봤다. 

 

https://stackoverflow.com/questions/42101723/unable-to-preventdefault-inside-passive-event-listener

Unable to preventDefault inside passive event listener

여기에 달려있던 답변들은 wheel, mousewheel, touchstart, touchmove 같은 passive가 true로 고정되어있는 이벤트 사용시에 사용할 수 있는 답변들 밖에 없었다. 그래서 나는 Text들을 클릭하면 checkBox를 클릭하게 하면되지 않을까 생각했고 코드를 수정했습니다.

 

const checkBoxTrigger = useRef<HTMLInputElement>(null);

<Checkbox
 colorScheme="commerse"
 size="lg"
 mr="10px"
 ref={checkBoxTrigger}
 onChange={() => {
                   onChange();
                   setBtn(!btn);
                 }}
 />
<Text
textColor="gray.600"
onClick={() => {
                 if (checkBoxTrigger.current !== null)
                  checkBoxTrigger.current.click();
                }}
>
 개인정보 수집 이용 동의(필수)
</Text>