Composition API 의 ref( ) 간단 개념 및 사용법

 

 

[ 개념 ]

 

•  반응형(reactive) 데이터를 만들때 사용
• 기본형 값(string, boolean 등)을 반응형으로 만들 때 사용
• 내부적으로 .value 라는 프로퍼티에 진짜 값이 들어있음 

 

[ 예시 ]

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

// count라는 숫자를 반응형으로 선언
const count = ref(0)

// 함수로 count 값 올리기
const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

 

1. count 를 ref() 객체로 선언
2. ref() 객체의 .vaule에 진짜 값이 들어있다고 하였으므로 count의 값을 읽거나 수정할때는 count.value 로 접근해야함
3. template 안에서는 .value 를 쓰지않고도 자동으로 꺼내주기 때문에 {{ count  }} 로 써도 됨

 

 

 

---

 

 

React 를 공부했다면 , ref() 는 React 의 useState() 같은 역할을 하는 것 같다 .

 

 

 

[ 출처 ]

 

https://ko.vuejs.org/api/reactivity-core.html

Vue.js