개발환경: vue 3

// html
[div ref="box"]
[button @click="toggleOption"]버튼[/button]
[/div]


//script
import { ref } from 'vue'
export default {
setup(){
const toggleOption = () => {
  this.$refs.box.classList.toggle('active')
}

return { toggleOption }
}
}



---------------------------------

대충 이런 구조일 때 크롬브라우저 콘솔에
Uncaught TypeError: Cannot read properties of undefined (reading 'refs') 오류가 뜹니다.

원하는 결과는 클래스 active가 클릭할 때마다 토글되는거에요

vue2에서는 this.$refs 로 하니까 dom 접근이 되서 클릭 이벤트가 잘 먹혔던 것 같은데 vue3에서는 에러가 나더군요

어떻게 해야될까요?

참고로 div에 ref 대신에 id로 바꾸고

document.querySelector('#box')로 접근하니까 잘 먹더군요~

--------
* 개발자라면 당연히 눈치채셨겠지만 피지알 편집기 특성상 들여쓰기 이쁘게 안 되고 꺽쇠 넣으면 안 되서 대괄호로 대체한거 양해부탁드립니다 ^^;