Vue 3 Reactivity Transform 2026: $ref, $computed 및 기술 면접 대비

// Reactivity Transform을 사용한 경우 (폐기된 구문)
<script setup>
let count = $ref(0)
let doubled = $computed(() => count * 2)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

// 컴파일 후 실제 코드
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

// 문제: 어떤 것이 반응형인지 한눈에 알기 어려움
let count = $ref(0)     // 반응형
let total = 0           // 비반응형

function update() {
  count++  // UI 업데이트됨
  total++  // UI 업데이트되지 않음
}

// TypeScript 통합 문제
let items = $ref<string[]>([])

// 다음과 같은 작업에서 타입 오류가 발생할 수 있었음
items.push('new item')  // 타입 추론이 제대로 작동하지 않는 케이스

// 반응성 손실 예시
let count = $ref(0)

function useCounter(c) {
  // c는 이미 원시값
  console.log(c)  // 0
}

useCounter(count)  // 반응성 손실

// $$ 매크로를 사용한 회피 방법
useCounter($$(count))  // ref로 전달됨

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubled = computed(() => count.value * 2)
  const isEven = computed(() => count.value % 2 === 0)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function reset() {
    count.value = initialValue
  }

  return {
    count,
    doubled,
    isEven,
    increment,
    decrement,
    reset
  }
}

<script setup>
import { reactive, toRefs } from 'vue'

const state = reactive({
  firstName: '',
  lastName: '',
  email: ''
})

const { firstName, lastName, email } = toRefs(state)

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

import { ref, reactive, isRef, isReactive } from 'vue'

// ref는 원시값을 래핑
const count = ref(0)
console.log(isRef(count))  // true
console.log(count.value)   // 0

// reactive는 객체를 프록시로 래핑
const state = reactive({ count: 0 })
console.log(isReactive(state))  // true
console.log(state.count)        // 0 (.value 불필요)

// reactive 주의사항
const { count: destructuredCount } = state  // 반응성 손실

import { ref, shallowRef, triggerRef } from 'vue'

// ref는 깊은 반응성 제공
const deepRef = ref({ nested: { value: 1 } })
deepRef.value.nested.value = 2  // 변경 감지됨

// shallowRef는 얕은 반응성만 제공
const shallow = shallowRef({ nested: { value: 1 } })
shallow.value.nested.value = 2  // 변경 감지되지 않음
shallow.value = { nested: { value: 2 } }  // 전체 교체는 감지됨

// 수동으로 트리거하는 경우
shallow.value.nested.value = 3
triggerRef(shallow)  // 명시적으로 업데이트 알림

import { ref, watch, watchEffect } from 'vue'

const searchQuery = ref('')
const results = ref([])

// watchEffect: 의존성 자동 추적
watchEffect(async () => {
  // searchQuery 변경 시 자동으로 재실행
  if (searchQuery.value.length > 2) {
    results.value = await fetchResults(searchQuery.value)
  }
})

// watch: 명시적 의존성 지정
watch(searchQuery, async (newValue, oldValue) => {
  console.log(`Changed from ${oldValue} to ${newValue}`)
  if (newValue.length > 2) {
    results.value = await fetchResults(newValue)
  }
}, { immediate: false, deep: false })

// 여러 소스 감시
watch(
  [searchQuery, () => state.filter],
  ([newQuery, newFilter], [oldQuery, oldFilter]) => {
    // 두 변경 모두에 반응
  }
)

import { customRef } from 'vue'

// 디바운스 적용된 ref 구현
function useDebouncedRef<T>(value: T, delay = 300) {
  let timeout: ReturnType<typeof setTimeout>
  
  return customRef<T>((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

// 사용 예시
const searchInput = useDebouncedRef('', 500)

import { reactive, toRef, toRefs } from 'vue'

const state = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 30
})

// toRef: 단일 속성을 ref로 변환
const ageRef = toRef(state, 'age')
ageRef.value++  // state.age도 31이 됨

// toRefs: 모든 속성을 refs로 변환
const { firstName, lastName } = toRefs(state)
firstName.value = 'Jane'  // state.firstName도 'Jane'이 됨

// Composable에서의 활용
function useUserState() {
  const state = reactive({ name: '', email: '' })
  return toRefs(state)  // 구조 분해해도 반응성 유지
}

<script setup>
// Vue 3.5 이후: 구조 분해해도 반응형 유지
const { title, count = 0 } = defineProps<{
  title: string
  count?: number
}>()

// watch로 감시 가능
watch(() => count, (newVal) => {
  console.log('count changed:', newVal)
})
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { useTemplateRef, onMounted } from 'vue'

const inputRef = useTemplateRef('input')

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

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

import { shallowRef, shallowReactive, markRaw, computed } from 'vue'

// 대용량 리스트에는 shallowRef 사용
const largeList = shallowRef<Item[]>([])

// 변경 불필요한 객체는 markRaw로 래핑
const config = markRaw({
  apiUrl: 'https://api.example.com',
  timeout: 5000
})

// computed의 캐시 활용
const expensiveComputed = computed(() => {
  // 의존하는 값이 변경되지 않으면 재계산되지 않음
  return largeList.value.filter(item => item.active).length
})

// 불필요한 반응성 피하기
const staticData = {
  labels: ['A', 'B', 'C'],  // 변경되지 않는 데이터
  constants: Object.freeze({ MAX: 100 })
}