[Vue 3] ref()란?

Vue 3에서 ref()는 값을 보유할 수 있는 반응형 객체를 생성하는 함수입니다. 

일반적으로 숫자나 문자열과 같은 간단한 데이터 유형을 저장하고 업데이트하는 데 사용됩니다.

ref( ) 쓰지 않고 기본 자료형 0  을 사용하면 버튼을 눌러도 값이 증가하지 않는 0만 있을 뿐이다.

(비슷한 걸로는 reactive() 가 있으나 ref() 와는 달리 collection 계열만 사용이 가능하다. 

그 밖의 내용은 공식 Documents 를 참고하기 바란다)

 

<template>
  <div>
    <p>Counter: {{ counter.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const counter = ref(0);

    function increment() {
      counter.value++;
    }

    return {
      counter,
      increment,
    };
  },
};
</script>

이 예제에서는 ref(0)을 사용해 반응형 변수 카운터를 생성합니다. 

이렇게 하면 카운터가 0 값으로 초기화됩니다. 

그런 다음 카운터 값을 단순히 증가시키는 증가 함수를 정의합니다.

템플릿에서는 {{ counter.value }}를 사용하여 현재 카운터 값을 표시하고 클릭 시 increment 함수를 호출하는

버튼을 추가했다.

참조 변수의 값에 액세스할 때는 .value 속성을 사용해야 한다는 점에 주의해야 합니다.

ref 변수 자체는 value 라는 속성만을 지닌 객체이다.