[ react 모달 종료 제어 ] cannot read property 'contains' of undefined

 

cannot read property 'contains' of undefined

  !   useRef이용해서 modal 제어 구현 중 오류

modal이외의 부분을 눌렀을 때, modal창이 사라지도록 하는 부분 구현중에

cannot read property 'contains' of undefined 라는 오류가 뜨면서 실행이 안되는 오류가 생겼다.

 

<... ref={node}> 를 이용해 이 영역 외의 다른 부분을 눌럿을때 창이 사라지게 해야하는 가장 상위의 태그에 ref를 적용해주고,

node를 console에 찍어보면 원래대로라면 current값이 떠야하고

위와같이 지금 눌리는 부분이 나와야하는데

계속 undefined가 떠서 안됐었다..

 

  이유    :: 삼항연산자로 조건을 주어서

 

Modals이 클릭했을때 나타나야하므로 state값을 주고 그 값을 삼항연산자 내에 조건을 주어 true일때만 modal이 보이게 했는데

 

그렇게 하면 처음에 modal이 false이므로 ref={node} 값이 없는 상황이 된다.

그래서 if(!node.current.이 부분부터 undefind되므로 오류가 발생한다.

 

 

  결론    :: 수정 코드

  !    modal이외의 부분을 눌렀을 때, modal창이 사라지도록 하는 부분 구현

 

AddEventListener(“mousedown” , modalOff)로 마우스가 눌렸을때 modal이 사라지게 하는 하는 방법이고,

UseRef와 !ref.current.contains 이용해 마우스가 눌렸을때, ref={node}에 해당하는 부분이 current값이고, 그 값이 있으면 true이므로 modal을 제어하는 state값이 ture가 되면서 modal을 띄워주는 형태이다.

 

 

:: 코드

// state, ref 사용
const [certification, setCertification] = useState(false);
const node = useRef();


//addEventListner
useEffect(() => {
    document.addEventListener("mousedown", modalOff);
    return () => {
      document.removeEventListener("mousedown", modalOff);
    };
}, []);
  

// styledcomponent - props display제어로 on off 설정
<Modals toggle={modal}>
  <div className="modalBox" ref={node}>
    <h2>인증 번호 입력하기</h2>
    <div>
      <input
        type="textarea"
        name="auth_number"
        onChange={handleChangeNum}
        maxLength="5" // 문자인증 자리수
      />
      <button onClick={certificationConfirm}>인증확인</button>
    </div>
  </div>
</Modals>;


//styledComponents display 제어
const Modals = styled.div`
  display: ${(props) => (props.toggle ? "flex" : "none")};
`;