<!-- ========================================== -->
<!-- 📂 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 = '반갑습니다! (ref)';
  counter.value++;
  console.log('✅ ref 업데이트됨:', message.value, counter.value);
};

// ------------------------------------------------
// 2. reactive()의 사용
// 오직 "객체(Object)나 배열"만 담을 수 있습니다. .value가 필요 없는 대신 제약이 많습니다.
// ------------------------------------------------
let user = reactive({
  name: '김민수',
  age: 20
});

const updateReactive = () => {
  // .value 없이 속성에 직접 접근합니다.
  user.age++;
  console.log('✅ reactive 업데이트됨:', user.age);
};

const breakReactive = () => {
  // 🚨 [주의] 아래처럼 통째로 갈아끼우면 반응성(화면 갱신)이 영원히 박살납니다!
  console.warn('🚨 경고: user 객체를 통째로 교체합니다. 이제 반응성이 끊어집니다!');
  user = { name: '이영희', age: 30 };
};
</script>

<template>
  <div class="flex-container">
    <!-- ref 템플릿 -->
    <div class="card ref-card">
      <h2>ref()</h2>
      <p>메시지: <strong>{{ message }}</strong></p>
      <p class="counter">{{ counter }}</p>
      <button @click="updateRef">ref 업데이트</button>
    </div>

    <!-- reactive 템플릿 -->
    <div class="card reactive-card">
      <h2>reactive()</h2>
      <p>이름: <strong>{{ user.name }}</strong></p>
      <p class="counter">{{ user.age }}세</p>
      <button @click="updateReactive">나이 먹기 (+1)</button>
      <button class="btn-danger" @click="breakReactive">
        🚨 통째로 교체 (반응성 파괴)
      </button>
    </div>
  </div>
</template>

<style scoped>
.flex-container { display: flex; gap: 2rem; max-width: 800px; margin: 2rem auto; }
.card { flex: 1; padding: 2rem; border-radius: 12px; }
.ref-card { border: 2px solid #3b82f6; background: #eff6ff; }
.ref-card h2 { color: #1d4ed8; font-weight: 800; }
.ref-card .counter { font-size: 2.5rem; font-weight: 900; color: #2563eb; }
.ref-card button { background: #3b82f6; color: white; width: 100%; padding: 0.75rem; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }
.reactive-card { border: 2px solid #ec4899; background: #fdf2f8; }
.reactive-card h2 { color: #be185d; font-weight: 800; }
.reactive-card .counter { font-size: 2.5rem; font-weight: 900; color: #db2777; }
.reactive-card button { background: #ec4899; color: white; width: 100%; padding: 0.75rem; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; margin-bottom: 0.5rem; }
.reactive-card .btn-danger { background: #475569; }
</style>