// ❌ Vue 3.4 이전: 반응성 유실
const { count, title } = defineProps<{ count: number; title?: string }>();

watch(() => count, () => {
  // 부모가 전달한 count prop이 바뀌어도 이 콜백은 반응하지 않습니다.
});

<script setup lang="ts">
import { watch, computed } from 'vue';

interface Props {
  count: number;
  title?: string;
  items?: string[];
}

// ✅ 구조 분해 할당과 기본값 정의를 동시에 수행
const { 
  count, 
  title = 'Default Title', 
  items = () => ['Vue', 'Nuxt'] 
} = defineProps<Props>();

// 1. watch에서 변수를 그대로 감시 가능
watch(() => count, (newCount) => {
  console.log(`count changed: ${newCount}`);
});

// 2. computed 내부에서도 반응형 의존성이 자동으로 수집됨
const doubleCount = computed(() => count * 2);
</script>

<template>
  <div class="counter-box">
    <h2>{{ title }}</h2>
    <p>Count: {{ count }} / Double: {{ doubleCount }}</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

// 컴파일 결과 (개념적 코드)
export default {
  setup(__props) {
    _watch(() => __props.count, (newCount) => {
      console.log(`count changed: ${newCount}`);
    });

    const doubleCount = _computed(() => __props.count * 2);

    return (_ctx, _cache) => {
      return _createVNode("p", null, `Count: ${__props.count}`);
    };
  }
}

function logValue(val: number) {
  // 전달된 시점의 정적 숫자값만 유지됩니다.
  console.log(val);
}

// ⚠️ 반응형 추적이 유지되지 않음
logValue(count);

// ✅ 반응형 유지가 필요하다면 getter 함수 형태로 감싸서 전달
function logReactiveValue(getVal: () => number) {
  watch(getVal, (v) => console.log(v));
}
logReactiveValue(() => count);

<!-- 이전 방식 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 템플릿의 ref 속성값과 정확히 변수명이 같아야 함
const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus();
});
</script>

<template>
  <input ref="inputEl" type="text" />
</template>

<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';

// ref 문자열 식별자를 명시적으로 전달
const searchInput = useTemplateRef<HTMLInputElement>('customInput');

onMounted(() => {
  // searchInput.value는 HTMLInputElement | null 타입으로 안전하게 추론
  searchInput.value?.focus();
});
</script>

<template>
  <input ref="customInput" type="text" placeholder="검색어를 입력해 주세요" />
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import ConfirmModal from './ConfirmModal.vue';

const modalRef = useTemplateRef<InstanceType<typeof ConfirmModal>>('confirmModal');

const handleOpen = () => {
  modalRef.value?.open();
};
</script>

<template>
  <ConfirmModal ref="confirmModal" />
  <button @click="handleOpen">열기</button>
</template>