Vue.js ref와 reactive 차이점

ref

ref로 래핑된 변수를 변경하면 Vue는 해당 변수에 대한 반응성을 추적하고 변경 사항을 감지하여 자동으로 컴포넌트를 업데이트

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0

count.value++; // 변수 변경
console.log(count.value); // 1

reactive

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

console.log(state.count); // 0
console.log(state.message); // 'Hello'

state.count++; // 프로퍼티 변경
state.message = 'Updated message';
console.log(state.count); // 1
console.log(state.message); // 'Updated message'

reactive로 감싼 객체의 프로퍼티에 접근하면 Vue는 해당 프로퍼티의 의존성을 추적하고 변경 사항을 감지하여 자동으로 컴포넌트를 업데이트

reactive는 객체 단위로 동작하며, 객체의 모든 프로퍼티가 반응성 가짐

 

ref는 단일 변수에 사용되고 reactive는 객체에 사용

ref로 래핑된 변수에는 .value를 사용하여 접근하고 변경

reactive로 만들어진 객체의 프로퍼티에는 직접 접근하거나 할당 가능