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

<template>
  <div>
    <p>원본과 반응형 객체의 동일성: {{ isSame }}</p>
  </div>
</template>

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

// 빈 객체를 생성합니다.
const raw = {};
// reactive() 함수를 사용하여 반응성 있는 객체를 생성합니다.
const proxy = reactive(raw);

// 원본 객체와 반응형 객체의 동일성을 확인합니다.
const isSame = proxy === raw;
</script>

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

Vue.js에서 reactive() 함수를 사용하면 반응성 있는 객체를 생성할 수 있습니다. 그러나 이 함수를 사용하여 생성된 반응형 객체와 원본 객체는 동일하지 않습니다.

위의 예제는 reactive() 함수를 사용하여 반응성 있는 객체를 생성하고, 원본 객체와 반응형 객체의 동일성을 확인하는 예제입니다. raw라는 빈 객체를 생성한 후, reactive() 함수를 사용하여 proxy라는 반응형 객체를 만듭니다. 그리고 두 객체를 비교하여 동일하지 않음을 확인합니다.

이는 Vue의 반응성 시스템이 객체를 감시하고 변경 사항을 추적하기 위해 원본 객체를 수정하여 새로운 객체를 생성하기 때문입니다. 따라서 반응형 객체와 원본 객체는 서로 다른 객체로 취급됩니다.

이러한 특성을 이해하고 활용하면 Vue 컴포넌트에서 상태 관리를 효율적으로 할 수 있습니다.