Error / React getElementByClassName() / Uncaught TypeError: Cannot read properties of undefined (reading 'add') 해결

리엑트로 퍼블리싱중 .. Aside를 구현하는 중 버튼을 누르면 클래스를 주려했다.

 

처음엔 이렇게 구현을 했다.

const handleAide = (e) =>{
  const asideWrap = document.getElementsByClassName(aside.aside_wrap);
  const deemed = document.getElementsByClassName(aside.deemed);
  console.log(asideWrap)
  document.body.classList.add(aside.stop)
  asideWrap.classList.add(aside.aside_actve)
  deemed.classList.add(aside.on)
}

'Uncaught TypeError: Cannot read properties of undefined (reading 'add')'

이런 에러가 발생해서 콘솔을 찍어보았다.

처음엔 이렇게 뜨길래 모지 잘뜨는거 같은데 했다.. 

한참을 버벅인 뒤 깨달았다. 아 엘리먼드가 아니라 배열로 가져왔네?

ClassName으로 가져오면 배열을 반환한다고 한다.

역시 난 왕초보.. 그래서 .item()으로 배열을 선택해줬더니 잘됐다.

 

<수정한 코드>

const handleAide = (e) =>{
  const asideWrap = document.getElementsByClassName(aside.aside_wrap).item(0);
  const deemed = document.getElementsByClassName(aside.deemed).item(0);
  document.body.classList.add(aside.stop)
  asideWrap.classList.add(aside.aside_actve)
  deemed.classList.add(aside.on)
}

이렇게 해주니 엘리먼트를 잘가져온다.

useState, useEffect 로 관리하면 더 리엑트스러울것 같은데 이렇게도 해보았다.