vue3 ref, reactive 비교

개인적으로는 reactive를 많이 쓰게 될것 같다.
처음 vue3를 접했을 땐 ref로 템플릿에서 선언된 dom에 접근하는 용도로 많이 사용했고,
그렇게 명시하면 바로 스크립트 단에서는 this.$refs.test
템플릿에서는 $refs.test로 접근할 수 있어 편했다.

그러나
vue3로 오면서
해당 방법처럼 접근하려면
템플릿에서도 ref="test"
스크립트 단에서도
setup()에서 const test=ref(false);
return에서 test를 리턴해줘야만 사용할 수 있어 중간과정이 늘어 불편하고 어려웠다.

그렇다고 reactive를 쓰기엔 react는 obejct형태이고
test.tt 형식으로 접근하고 선언해야해 앞부분 접미사가 늘어나는게 불편했다.

vue3 좀 더 알아보니 reactive로 선언하고 값을 집어넣고 반영하고
리턴할때

return {
...toRefs(test);
}

형식으로 리턴해주면 test안의 하위 오브젝트를 refs에서 리턴한거처럼 템플릿에서도 변수에서도 사용할 수 있다.