반응형 상태 관리 (ref vs reactive)
Vue 3에서 변수의 값이 바뀌었을 때 화면도 자동으로 바뀌게(반응형) 만들려면 ref나 reactive라는 마법의 상자에 값을 담아야 합니다. 두 가지 모두 역할은 비슷하지만, 담을 수 있는 데이터 종류와 사용법이 약간 다릅니다.
💡 초보자를 위한 실전 요약: 언제 뭘 써야 할지 헷갈리신다구요? 무조건
ref()만 쓰시면 됩니다! Vue 공식 문서에서도 초보자에게는 모든 데이터 타입에 일관성 있게 사용할 수 있는 ref의 사용을 강력히 권장하고 있습니다.
<!-- ==========================================
// 📂 StateManagement.vue (ref와 reactive 비교 예제)
// ========================================== -->
<script setup>
import { ref, reactive } from 'vue';
// ------------------------------------------------
// 1. ref()의 사용 (강력 추천!)
// 원시값(숫자, 문자)부터 객체, 배열까지 다 담을 수 있는 만능 상자.
// ------------------------------------------------
const message = ref('안녕하세요!'); // 문자열
const counter = ref(0); // 숫자
const updateRef = () => {
// 스크립트 내부에서 값을 읽거나 바꿀 때는 상자 뚜껑을 열어주는 '.value'를 반드시 적어야 합니다.
message.value = '반갑습니다!';
counter.value++;
};
// ------------------------------------------------
// 2. reactive()의 사용
// 오직 "객체(Object)나 배열"만 담을 수 있습니다. .value가 필요 없는 대신 제약이 많습니다.
// ------------------------------------------------
const user = reactive({
name: '김민수',
age: 20
});
const updateReactive = () => {
// .value 없이 속성에 직접 접근합니다.
user.age++;
// 🚨 [주의] 아래처럼 통째로 갈아끼우면 반응성(화면 갱신)이 영원히 박살납니다!
// user = { name: '이영희', age: 30 };
};
</script>
<template>
<div class="p-8 max-w-lg mx-auto space-y-8 bg-white text-gray-800 rounded-xl shadow-lg mt-10">
<!-- 템플릿(HTML)에서는 .value를 적을 필요가 전혀 없습니다! -->
<section class="border-b pb-6">
<h2 class="text-xl font-bold text-blue-600 mb-2">ref() 결과</h2>
<p class="text-lg">메시지: {{ message }}</p>
<p class="text-lg">카운터: {{ counter }}</p>
<button @click="updateRef" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
ref 업데이트
</button>
</section>
<section>
<h2 class="text-xl font-bold text-pink-600 mb-2">reactive() 결과</h2>
<p class="text-lg">유저 이름: {{ user.name }}</p>
<p class="text-lg">유저 나이: {{ user.age }}</p>
<button @click="updateReactive" class="mt-4 px-4 py-2 bg-pink-500 text-white rounded">
reactive 업데이트
</button>
</section>
</div>
</template>