Vue3 ref() 로 선언된 변수에 데이터 할당하기

Vue 3에서는 반응형 변수를 선언할 때 ref()를 사용한다.

ref()는 Vue의 반응형(Reactivity) 시스템을 활용하여 데이터 변경을 감지할 수 있도록 도와준다.

 

✅ ref()를 사용한 변수 선언 및 데이터 할당

 

1️⃣ ref()로 변수 선언하기

import { ref } from 'vue';

// 빈 문자열을 초기값으로 설정
const dataVal = ref('');

✅ ref('') → Vue의 반응형 변수 선언

 

2️⃣ ref() 변수에 값 할당하기

// 외부에서 주어진 데이터
const dataLst = '1234567';

// ref() 변수에 데이터 할당
dataVal.value = dataLst;

✅ .value를 통해 값 변경 → ref()로 선언한 변수는 .value를 통해 값을 변경해야 반응형이 유지됨

 

3️⃣ 템플릿에서 ref() 변수 사용하기

<template>
  <div>
    <p>dataVal: {{ dataVal }}</p>
    <p>dataVal.value: {{ dataVal.value }}</p>
  </div>
</template>

✅ {{ dataVal }} 또는 {{ dataVal.value }}로 템플릿에서 값 출력 가능

 

💡 Tip:

• 템플릿에서 {{ dataVal }}라고만 써도 Vue가 내부적으로 .value를 자동으로 처리해줌

• ref()는 기본 자료형(문자열, 숫자, boolean 등)에 주로 사용

 

📌 정리 & 결론

개념	설명	예제
ref() 선언	반응형 변수 선언	const dataVal = ref('')
값 할당	.value를 사용하여 값 변경	dataVal.value = '1234567'
템플릿 사용	{{ dataVal }}로 값 출력 가능	<p>{{ dataVal }}</p>

 

🚀 위 개념을 이해하면 Vue 3에서 데이터를 동적으로 관리할 수 있다!