Vue에서 값 접근은 toValue

vue는 반응형 상태의 변수를 만들기 위해서 ref를 주로 쓴다.

 

이걸 쓰면 C에서 포인터 처럼 asterisk(*)와 같이

.value를 통해서 실제 값에 접근할 수 있다.

 

Vue나 React가 핫한 이유도 반응성이 한 몫을 하고 있는데, 일반 변수가 추적이 어려운 이유는 아래 링크에 나와있고,

https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs

반응형 기초 | Vue.js

 

ref를 쓰다보면 내가 직접 선언한 변수들은 자연스레 .value를 사용하겠지만 그렇지 않은 경우거나 프로젝트 양이 방대해 질수록 ref로 선언한 변수인지 일반 변수인지 헷갈리게 된다..ㅎ

 

실 예로 Nuxt에서 useFetch 와 같은 함수를 사용하게 되면
data, error 등이 응답으로 오게 되는데..
이 값이 ref로 싸여져있는것인지, 아닌지 애매모호해진다.
그 경우 묻지도 따지지도 말고, 아래와 같이 toValue 함수를 사용해주면 된다.

toValue(data)

그렇지 않으면 매번 값에 접근할 때 data.value.something이 맞는지 data.something이 맞는지 체크해가면서 해야되기 때문에 여간 번거로운 것이 아니다..ㅎ