Vue3 ref() 완전 정복 - 언제 쓰고 왜 쓰는가

1. ref가 뭔지 한 줄 요약

반응형 데이터를 만들어주는 함수다.

 

2. 코드 비교

// Vue2 Options API
data() {
  return { count: 0 }
}

// Vue3 ref
import { ref } from 'vue'
const count = ref(0)

 

3. 자주 하는 실수

.value 를 까먹는 경우가 많다.

const count = ref(0)
count.value++ // 스크립트에서는 .value 필요

 

템플릿에서는 .value 없이 바로 쓸 수 있다.

<template>
  <p>{{ count }}</p> <!-- .value 안 써도 됨 -->
</template>

 

4. ref vs reactive

	ref	reactive
원시값	✅	❌
객체	✅	✅
.value 필요	✅	❌

단순한 값은 ref, 객체는 reactive가 적합하다.

 

5. 마무리

데이터가 바뀌어도 화면이 안 바뀌는 문제가 있었는데, ref()로 감싸니까 데이터 변경에 따라 자동으로 리렌더링됐다. Vue2는 data()에 미리 선언해야 반응형이 되지만, Vue3는 ref()로 어디서든 반응형 데이터를 만들 수 있어서 훨씬 유연하다.