[Vue.js] 'ref' 접근 방식

섹션별 'ref'값에 접근하는 방식

1. < script > 섹션

: <sciprt>섹션에서 ref(data)로 정의된 변수에 접근할때는 .value를 사용해야한다.

Why❓ : 직접 저장하는 것이 아닌 값이 변경될 때 이를 추적하고 반응성을 제공하는 객체이기 때문이다.
-> ref는 .value 속성을 통해 실제 값을 저장하고 있기 때문에, 값을 읽거나 쓸대는 항상 .value를 통해 접근해야함

[예시]

const count = ref(0);
console.log(count.value); // 0
count.value = 1;
console.log(count.value); // 1

2. < template > 섹션

: <template> 섹션에서는 Vue가 자동으로 .value를 처리해줌 -> 템플릿이 더 간단하고 직관적으로 보이게 도움을 준다.

[예시]

<template>
  <div>{{ count }}</div> <!-- 여기서 count는 count.value를 자동으로 참조 -->
</template>

이렇게 설계된 이유
: 코드의 간결함과 가독성을 높여준다.

• <template> : 보통 UI를 정의하는 곳으로, 복잡한 코드보다는 직관적이고 간단한 표현이 더 중요함
• <script> : 명시적인 접근 방식이 필요할 때가 많기 때문에, value를 사용하여 코드의 의도를 분명히 함