<div id="readability-page-1" class="page"><div>
												<h2>Vue.js ref: 반응형 ref vs 템플릿 ref</h2>
<h2>1. 반응형 ref</h2>
<h3>반응형 ref란?</h3>
<p>반응형 ref는 <strong>데이터를 반응형으로 만들기 위한 함수</strong>입니다. 주로 원시 타입(string, number, boolean 등)을 반응형으로 다룰 때 사용하며, <code>.value</code> 속성을 통해 값에 접근합니다.</p>
<h3>기본 사용법</h3>
<pre><code>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
    }
  }
}</code></pre>
<h3>템플릿에서의 자동 언래핑</h3>
<p>스크립트에서는 <code>.value</code>가 필수지만, 템플릿에서는 자동으로 언래핑됩니다.</p>
<pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;!-- .value 없이 사용 --&gt;
    &lt;p&gt;{{ count }}&lt;/p&gt;
    &lt;p&gt;{{ message }}&lt;/p&gt;

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

    &lt;!-- v-model에서도 .value 불필요 --&gt;
    &lt;input v-model="message"&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
<h3>반응형 ref 주의사항</h3>
<h4>1. 스크립트에서는 항상 .value 사용</h4>
<pre><code>const count = ref(0)

// OK
count.value = 10

// 반응성 상실 : 더이상 ref 객체 아님
count = 10</code></pre>
<h4>2. reactive 객체 안의 ref는 자동 언래핑</h4>
<pre><code>import { reactive, ref } from 'vue'

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

console.log(state.count) // 0 (.value 불필요)
state.count++ // 동작함</code></pre>
<h2>2. 템플릿 ref</h2>
<h3>템플릿 ref란?</h3>
<p>템플릿 ref는 <strong>HTML 요소나 컴포넌트 인스턴스에 직접 접근하기 위한 기능</strong>입니다.</p>
<h3>기본 사용법</h3>
<pre><code>&lt;template&gt;
  &lt;input ref="emailInput" type="email" placeholder="이메일 입력" /&gt;
  &lt;button @click="focusInput"&gt;포커스&lt;/button&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  methods: {
    focusInput() {
      // this.$refs로 DOM 요소 접근
      this.$refs.emailInput.focus()
    }
  },
  mounted() {
    console.log(this.$refs.emailInput) // &lt;input&gt; DOM 요소
    this.$refs.emailInput.focus() // 자동 포커스
  }
}
&lt;/script&gt;</code></pre>
<h3>템플릿 ref 주의사항</h3>
<h4>1. 초기값은 null</h4>
<pre><code>const myInput = ref(null)
// 컴포넌트 마운트 전까지 null</code></pre>
<h4>2. onMounted나 이후에 접근</h4>
<pre><code>const emailInput = ref(null)

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

// onMounted에서 접근
onMounted(() =&gt; {
  console.log(emailInput.value) // &lt;input&gt; 요소
  emailInput.value.focus()
})</code></pre>
<h2>요약 비교표</h2>
<table>
<thead>
<tr>
<th>특징</th>
<th>반응형 ref</th>
<th>템플릿 ref</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>선언 방식</strong></td>
<td><code>const data = ref(value)</code></td>
<td><code>&lt;div ref="name"&gt;</code></td>
</tr>
<tr>
<td><strong>주요 용도</strong></td>
<td>반응형 상태 관리</td>
<td>DOM/컴포넌트 접근</td>
</tr>
<tr>
<td><strong>값의 타입</strong></td>
<td>데이터 값</td>
<td>DOM 요소 또는 컴포넌트 인스턴스</td>
</tr>
<tr>
<td><strong>초기값</strong></td>
<td>원하는 값</td>
<td><code>null</code></td>
</tr>
<tr>
<td><strong>접근 시점</strong></td>
<td>즉시 가능</td>
<td><code>onMounted</code> 이후</td>
</tr>
<tr>
<td><strong>스크립트 사용</strong></td>
<td><code>.value</code>로 접근</td>
<td><code>.value</code>로 DOM 접근</td>
</tr>
<tr>
<td><strong>템플릿 사용</strong></td>
<td>자동 언래핑</td>
<td>속성으로만 사용</td>
</tr>
<tr>
<td><strong>주요 사례</strong></td>
<td>폼 데이터, 상태, 카운터 등</td>
<td><code>focus()</code>, <code>scroll()</code>, 라이브러리 연동</td>
</tr>
</tbody>
</table>
<p><span></span> <span>Post Views:</span> <span>10</span>
			</p>											</div></div>

상구리의 기술 블로그

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>
    
    <p>{{ count }}</p>
    <p>{{ message }}</p>
    
    <button @click="count++">증가</button>
    
    <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(), 라이브러리 연동

댓글