Vue 3 ref 완전 정복: 기본 사용법과 핵심 주의사항

Vue 3에서 가장 중요한 변화 중 하나는 바로 반응형 시스템의 완전한 재작성입니다. Vue 2의 Object.defineProperty 기반에서 ES6 Proxy 기반으로 바뀌면서, ref라는 새로운 핵심 개념이 등장했습니다.

오늘은 Vue 3의 ref에 대해 기본 사용법부터 실무에서 반드시 알아야 할 주의사항까지 차근차근 알아보겠습니다.

ref란 무엇인가?

ref는 원시값을 반응형으로 만들기 위한 함수입니다. JavaScript의 원시값(string, number, boolean 등)은 기본적으로 참조가 아닌 값으로 전달되기 때문에, 직접적으로 반응형으로 만들 수 없습니다. 이 문제를 해결하기 위해 Vue 3에서 ref가 등장했죠.

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value = 5
console.log(count.value) // 5

ref 기본 사용법

1. 기본 선언과 사용

import { ref } from 'vue'

// 다양한 원시값을 반응형으로 만들기
const count = ref(0)
const message = ref('Hello Vue 3')
const isVisible = ref(true)

// 값 읽기/쓰기는 반드시 .value를 통해
console.log(count.value) // 0
count.value = 10
console.log(message.value) // 'Hello Vue 3'

2. 템플릿에서의 마법같은 사용

Vue 템플릿에서는 .value를 생략할 수 있습니다. 이를 **자동 언래핑(auto-unwrapping)**이라고 합니다.

<template>
  <!-- .value 없이 바로 사용 가능! -->
  <div>카운트: {{ count }}</div>
  <button @click="count++">증가</button>
  <input v-model="message" />
  <p v-if="isVisible">{{ message }}</p>
</template>

<script setup>
const count = ref(0)
const message = ref('Hello Vue 3')
const isVisible = ref(true)
</script>

3. 객체도 ref로 감쌀 수 있습니다

const user = ref({
  name: 'John',
  age: 30
})

// 객체 전체를 교체
user.value = { name: 'Jane', age: 25 }

// 특정 속성만 변경
user.value.name = 'Bob'
user.value.age = 35

ref vs reactive: 언제 무엇을 사용할까?

// ref - 원시값과 객체 모두 가능
const name = ref('Vue')
const user = ref({ name: 'John', age: 30 })

// reactive - 객체만 가능
const state = reactive({ count: 0, name: 'Vue' })

// 접근 방식의 차이
console.log(name.value) // 'Vue'
console.log(user.value.name) // 'John'
console.log(state.count) // 0 (.value 불필요)

권장사항: 원시값은 ref, 복잡한 객체는 reactive를 사용하세요.

꼭 알아야 할 주의사항

⚠️ 1. .value를 깜빡하지 마세요

가장 흔한 실수입니다. script 영역에서는 반드시 .value를 사용해야 합니다.

const count = ref(0)

// ❌ 틀림 - 반응형이 동작하지 않음
count = 5

// ✅ 맞음
count.value = 5

⚠️ 2. 구조 분해 할당의 함정

구조 분해 할당을 사용하면 반응형을 잃게 됩니다.

const state = ref({ count: 0, name: 'Vue' })

// ❌ 반응형 손실! count와 name은 더이상 반응형이 아님
const { count, name } = state.value

// ✅ 이렇게 사용하세요
const count = computed(() => state.value.count)
const name = computed(() => state.value.name)

⚠️ 3. 함수 인자로 전달할 때 주의

function updateCount(countRef) {
  // ❌ 이렇게 하면 원시값만 전달됨
  countRef = 10
  
  // ✅ ref 객체 자체를 수정해야 함
  countRef.value = 10
}

const count = ref(0)
updateCount(count) // ref 전체를 전달

실무 팁

1. 타입스크립트와 함께 사용하기

const count = ref<number>(0)
const user = ref<{ name: string; age: number }>({
  name: 'John',
  age: 30
})

2. computed와 함께 활용

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

마무리

Vue 3의 ref는 단순해 보이지만 매우 강력한 반응형 시스템의 핵심입니다. 기본 사용법을 확실히 익히고, 특히 .value 사용과 구조 분해 할당 시 반응형 손실에 주의한다면 Vue 3를 훨씬 효과적으로 활용할 수 있을 것입니다.

다음에는 reactive와 computed에 대해서도 알아보겠습니다. Vue 3의 Composition API를 마스터하는 여정, 함께 계속해요! 🚀