Vue3 템플릿에서의 반응형 변수 사용법

Vue3의 Composition API를 사용할 때 ref(), reactive()로 정의한 변수들을 템플릿에서 어떻게 다루는지 정확히 이해하는 것이 중요합니다. 이번 글에서는 setup() 함수 안에서 정의한 반응형 변수를 템플릿에서 어떻게 접근하고 사용하는지 알려드릴게요.

1. ref() 변수 템플릿에서 사용하기

ref()로 선언한 변수는 .value로 접근해야 하지만, 템플릿에서는 .value를 생략하고 사용할 수 있어요.

예제:

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

const count = ref(0)
</script>

<template>
  <p>{{ count }}</p> <!-- count.value 아님 -->
  <button @click="count++">+</button>
</template>

요약:

• JS 안: count.value
• 템플릿 안: {{ count }}, @click="count++"

2. reactive() 변수 템플릿에서 사용하기

reactive()로 만든 객체는 속성에 직접 접근하면 되고, 템플릿에서도 그대로 사용하면 됩니다.
예제:

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

const state = reactive({
  name: 'Vue3',
  age: 3
})
</script>

<template>
  <p>{{ state.name }}</p>
  <p>{{ state.age }}</p>
</template>

 

3. 구조 분해 주의 (Destructuring )

reactive 객체는 구조 분해하면 반응형이 깨질 수 있습니다.

// 반응형 깨짐
const { name } = state

이렇게 하면 name은 더 이상 반응형이 아니에요.
해결 방법:

• 그냥 state.name으로 쓰기
• 또는 toRefs() 사용

import { toRefs } from 'vue'
const { name } = toRefs(state) // 반응형 유지됨

 

4. 템플릿에서 ref() vs reactive 정리

구분	ref	reactive
선언 방식	const a = ref(0)	const obj = reactive({ a: 0 })
템플릿 접근	{{ a }}	{{ obj.a }}
JS 접근	a.value	obj.a
구조분해 가능	가능 (ref는 OK)	주의! toRefs() 필요

마무리 요약

• 템플릿 안에서는 .value 없이 사용 가능
• ref()는 단일 값에 적합, reactive()는 객체에 적합
• 구조 분해 시 반응형이 깨질 수 있으므로 주의!