[Vue.js] ref의 자동 래핑 해제

<template>
  <div>
    <p>현재 count: {{ count }}</p>
    <button @click="increaseCount">count 증가</button>
  </div>
</template>

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

// ref를 사용하여 반응성 있는 변수를 생성합니다.
const count = ref(0);

// count를 증가시키는 함수
const increaseCount = () => {
  count.value++;
};
</script>

<style scoped>
/* 컴포넌트의 스타일을 여기에 작성합니다. */
</style>

Vue.js에서 ref로 생성된 변수는 반응성 객체의 속성처럼 동작합니다. 이는 변수에 직접 액세스하거나 변경할 때 자동으로 래핑이 해제되어 일반 속성처럼 동작한다는 것을 의미합니다.

위의 예제는 ref를 사용하여 반응성 있는 변수를 생성하고, 해당 변수를 증가시키는 예제입니다. count라는 변수에는 ref로 생성된 값이 할당되어 있으며, 화면에는 해당 변수의 값을 표시하고, 버튼을 클릭하면 해당 변수를 증가시킵니다.

ref를 사용하여 생성된 변수는 .value를 통해 내부 값을 액세스하고 변경할 수 있습니다. 그러나 Vue는 변수에 직접 액세스하거나 변경할 때 자동으로 .value를 사용하여 내부 값을 래핑 해제합니다. 따라서 일반적인 변수처럼 사용할 수 있으며, 코드의 가독성과 유연성을 높일 수 있습니다.