둘 다 Composition API에서 반응형 상태를 만들지만 동작 방식이 다릅니다. ref는 모든 값(원시 값 포함)을 반응형 컨테이너로 감싸고, reactive는 객체를 직접 깊은 반응형으로 만듭니다.
ref — 모든 값에 사용, .value로 접근
vue
<script setup>
import { ref } from "vue";
const count = ref(0); // 원시 값을 감쌈
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ 스크립트에서는 반드시 .value 사용
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ 템플릿에서는 .value가 자동으로 언래핑됨 -->
</template>
핵심 특성: JavaScript에서는 를 통해 ref에 접근하지만, 템플릿에서는 Vue가 자동으로 언래핑합니다. 스크립트에서 를 빠뜨리는 것이 가장 흔한 초보자 버그입니다.
