ref & reactive

Vue에서 **reactive**와 **ref**는 반응성 상태를 관리하는 두 가지 방법입니다. 둘 다 Vue의 반응성 시스템을 사용하여 상태를 추적하고 변경 시 자동으로 UI를 업데이트하지만, 사용하는 방식과 적용 대상에 차이가 있습니다.

 

1. ref(): 기본 데이터 타입과 함께 사용

ref는 단일 값(예: 문자열, 숫자, 불리언 등)을 반응성으로 만들 때 사용됩니다. ref는 Vue에서 원시 값(primitive value)들을 반응형 데이터로 만들기 위해 사용됩니다.

• ref는 원시 값(primitive value)을 반응성 상태로 만들어 줍니다.
• ref로 선언된 값은 객체의 형태로 감싸지기 때문에 .value 프로퍼티를 통해 접근해야 합니다.
• 객체가 아닌 기본 데이터 타입에 사용할 때 주로 사용됩니다

import { ref } from 'vue';

const count = ref(0);  // count는 이제 반응형 상태입니다.
const name = ref('John Doe');

// .value로 접근
console.log(count.value);  // 0
count.value = 5;
console.log(count.value);  // 5

위 코드에서 count와 name은 ref()로 선언되어 **.value**를 통해 값을 읽고 쓸 수 있습니다.

 

2. reactive(): 객체나 배열에 사용

reactive는 객체나 배열처럼 복잡한 데이터 구조에 반응성을 부여할 때 사용됩니다. reactive는 객체나 배열을 반응성으로 만들어, 그 객체의 속성이나 배열의 값을 자동으로 추적하고 반영합니다.

• reactive는 객체나 배열에 반응성을 적용하는 데 사용됩니다.
• 객체나 배열의 값을 직접 수정하고 추적할 때 유용합니다.
• reactive로 선언된 데이터는 .value 없이 직접 속성에 접근할 수 있습니다.

import { reactive } from 'vue';

const person = reactive({
  name: 'John Doe',
  age: 30
});

console.log(person.name);  // 'John Doe'
person.name = 'Jane Doe';
console.log(person.name);  // 'Jane Doe'

 

 

여기서 person 객체는 reactive로 선언되어 **person.name**처럼 속성에 직접 접근하고 값을 변경할 수 있습니다. reactive는 객체나 배열의 속성 값이 변할 때 반응성을 제공합니다.

 

차이점 요약

특징

ref vs reactive

주요 용도	원시 데이터(숫자, 문자열, 불리언 등)	객체나 배열과 같은 복잡한 데이터 구조
값에 접근하는 방식	.value를 통해 접근	속성에 직접 접근
반응성 적용 대상	단일 값	객체나 배열
예시	const count = ref(0);	const person = reactive({ name: 'John' });

3. ref vs reactive 사용하기 적절한 경우

• **ref**는 단일 값(예: 숫자, 문자열 등)을 반응형으로 만들 때 사용합니다.
  • 예: 카운트, 플래그 값, 텍스트 데이터
• **reactive**는 객체나 배열을 반응형으로 만들 때 사용합니다.
  • 예: 사용자 객체, 리스트, 상태 관리 객체