[Vue.js] reactive()를 사용하여 반응성 있는 객체 생성하기

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="incrementCount">증가</button>
  </div>
</template>

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

// 반응성 객체를 생성합니다.
const state = reactive({
  count: 0
});

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

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

Vue.js에서 reactive() 함수를 사용하면 반응성 있는 객체를 생성할 수 있습니다. 이를 통해 객체의 속성이 변경될 때 Vue가 자동으로 화면을 업데이트할 수 있습니다.

위의 예제는 reactive()를 사용하여 반응성 있는 객체를 생성하는 예제입니다. state 객체는 reactive() 함수로 감싸져 있으며, count라는 속성을 가지고 있습니다. 화면에는 count의 값을 표시하고, 버튼을 클릭하면 incrementCount 함수가 호출되어 count를 증가시킵니다.

reactive()를 사용하면 Vue 컴포넌트 내에서 감시할 객체를 손쉽게 생성할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있으며, Vue의 반응성 시스템을 최대한 활용할 수 있습니다.