Vue.js ref: 반응형 ref vs 템플릿 ref

1. 반응형 ref

반응형 ref란?

반응형 ref는 데이터를 반응형으로 만들기 위한 함수입니다. 주로 원시 타입(string, number, boolean 등)을 반응형으로 다룰 때 사용하며, .value 속성을 통해 값에 접근합니다.

기본 사용법

import { ref } from 'vue'

export default {
  setup() {
    // 다양한 타입의 ref 생성
    const count = ref(0)
    const message = ref('안녕하세요')
    const isActive = ref(true)
    const items = ref([])
    const user = ref({ name: '홍길동', age: 30 })

    // 값 읽기와 수정
    console.log(count.value) // 0
    count.value++ // 1

    message.value = '반갑습니다'
    user.value.name = '김철수'

    return {
      count,
      message,
      isActive,
      items,
      user
    }
  }
}

템플릿에서의 자동 언래핑

스크립트에서는 .value가 필수지만, 템플릿에서는 자동으로 언래핑됩니다.

<template>
  <div>
    <!-- .value 없이 사용 -->
    <p>{{ count }}</p>
    <p>{{ message }}</p>

    <!-- 이벤트 핸들러에서도 .value 불필요 -->
    <button @click="count++">증가</button>

    <!-- v-model에서도 .value 불필요 -->
    <input v-model="message">
  </div>
</template>

반응형 ref 주의사항

1. 스크립트에서는 항상 .value 사용

const count = ref(0)

// OK
count.value = 10

// 반응성 상실 : 더이상 ref 객체 아님
count = 10

2. reactive 객체 안의 ref는 자동 언래핑

import { reactive, ref } from 'vue'

const count = ref(0)
const state = reactive({
  count // reactive 안에서는 자동 언래핑
})

console.log(state.count) // 0 (.value 불필요)
state.count++ // 동작함

2. 템플릿 ref

템플릿 ref란?

템플릿 ref는 HTML 요소나 컴포넌트 인스턴스에 직접 접근하기 위한 기능입니다.

기본 사용법

<template>
  <input ref="emailInput" type="email" placeholder="이메일 입력" />
  <button @click="focusInput">포커스</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // this.$refs로 DOM 요소 접근
      this.$refs.emailInput.focus()
    }
  },
  mounted() {
    console.log(this.$refs.emailInput) // <input> DOM 요소
    this.$refs.emailInput.focus() // 자동 포커스
  }
}
</script>

템플릿 ref 주의사항

1. 초기값은 null

const myInput = ref(null)
// 컴포넌트 마운트 전까지 null

2. onMounted나 이후에 접근

const emailInput = ref(null)

// setup 단계에서는 접근 불가
console.log(emailInput.value) // null

// onMounted에서 접근
onMounted(() => {
  console.log(emailInput.value) // <input> 요소
  emailInput.value.focus()
})

요약 비교표

특징	반응형 ref	템플릿 ref
선언 방식	const data = ref(value)	<div ref="name">
주요 용도	반응형 상태 관리	DOM/컴포넌트 접근
값의 타입	데이터 값	DOM 요소 또는 컴포넌트 인스턴스
초기값	원하는 값	null
접근 시점	즉시 가능	onMounted 이후
스크립트 사용	.value로 접근	.value로 DOM 접근
템플릿 사용	자동 언래핑	속성으로만 사용
주요 사례	폼 데이터, 상태, 카운터 등	focus(), scroll(), 라이브러리 연동