원시값과 객체 상태를 반응형으로 관리합니다.
ref는 모든 값에 사용할 수 있고 script에서는 .value로 접근합니다. reactive는 객체 proxy를 반환하며 템플릿에서는 둘 다 자동으로 풀립니다.
구조 분해로 reactive 속성을 꺼내면 연결이 끊길 수 있어 toRefs나 getter를 사용합니다.
상태 소유권을 분명히 하고 외부에서 전달된 props를 직접 변경하지 않습니다.
script에서 ref 자체에 숫자를 더하면 값이 아니라 ref 객체를 다루게 됩니다.
로컬 프로젝트에서 확인해보세요course에 completed 속성을 추가하고 버튼으로 전환하세요.
<script setup>
import { ref, reactive } from "vue";
const count = ref(1);
const course = reactive({ title: "Vue 상태", hours: 12 });
</script>
<template>
<main>
<h1>{{ course.title }}</h1>
<p>{{ course.hours }}시간 · {{ count }}회 복습</p>
<button @click="count++">복습</button>
</main>
</template>