[Vue] Vue3에서 ref와 reactive 알아보기

Vue3에서 ref와 reactive는 모두 반응형 데이터를 만들 수 있도록 도와주는 유용한 도구이지만, 각각의 특징과 사용법에 차이점이 있습니다.

1. 데이터 타입:

• ref: 기본 자료형 (String, Number, Boolean) 및 객체 모두 사용 가능
• reactive: 객체만 사용 가능 (Object, Array, Map, Set 포함)

2. 접근 방식:

• ref: .value 접근자를 사용하여 값에 접근 및 변경
• reactive: 객체 속성처럼 직접 접근 및 변경 가능

const count = ref(0)
count.value = 1

3. 객체 재할당:

• ref: 객체를 재할당하면 반응성 유지

const obj = ref({})
obj.value = { newProperty: 'value' }

• reactive: 객체를 재할당하면 반응성 상실

const obj = reactive({})
obj = { newProperty: 'value' }; // 반응성 상실

4. 사용 사례:

• ref:
  • 간단한 값 관리 (예: 카운터, 체크박스 상태)
  • 기본 자료형 사용 필요
  • 객체의 특정 속성만 반응성 필요
• reactive:
  • 복잡한 객체 관리 (예: 사용자 프로필, 폼 데이터)
  • 객체 전체가 반응성 필요
  • 객체 재할당 가능성 낮음

5. 추가 정보:

• ref는 내부적으로 reactive를 사용하여 구현
• 객체의 경우 ref와 reactive 모두 사용 가능
• computed 프로퍼티와 함께 사용하여 데이터 변환 및 처리

선택 가이드:

• 데이터 타입, 접근 방식, 객체 재할당 가능성 고려
• 명확하고 유지 관리, 쉬운 코드 작성 중요

1. 기본 사용법:

ref

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 person = reactive({ name: 'John', age: 30 });
console.log(person.name); // 'John' 출력

person.age = 31;
console.log(person.age); // 31 출력

2. 객체 속성 업데이트:

ref

const obj = ref({ count: 0 });
obj.value.count++;
console.log(obj.value.count); // 1 출력

reactive

const obj = reactive({ count: 0 });
obj.count++;
console.log(obj.count); // 1 출력

3. 객체 재할당:

ref

const obj = ref({});
obj.value = { name: 'John' };
console.log(obj.value.name); // 'John' 출력

obj.value = { age: 30 };
console.log(obj.value.age); // 30 출력

reactive

const obj = reactive({});
obj.name = 'John';
console.log(obj.name); // 'John' 출력

obj = { age: 30 }; // obj 재할당
console.log(obj.name); // undefined 출력 (반응성 상실)

4. 배열 데이터 관리:

ref

const numbers = ref([1, 2, 3]);
numbers.value.push(4);
console.log(numbers.value); // [1, 2, 3, 4] 출력

reactive

const numbers = reactive([1, 2, 3]);
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4] 출력

5. 컴포넌트에서 사용:

<template>
  <div>
    <p>카운터: {{ count }}</p>
    <button @click="count++">증가</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    return {
      count,
    };
  },
};
</script>