ref와 reactive차이

Vue 3에서 ref와 reactive는 반응형 데이터를 만드는 두 가지 방법. 이 둘은 데이터의 유형과 사용 방식에서 차이가 있음.

---

1. ref

• 단일 값(숫자, 문자열, 불리언 등)을 반응형으로 만들 때 주로 사용.
• 특징: ref는 값을 감싸는 객체를 반환하며, 이 객체의 .value 속성에 접근해야 실제 값을 읽거나 쓸 수 있음.

사용 예시

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 숫자 0을 반응형으로 생성

    const increment = () => {
      count.value++; // .value로 접근
    };

    return { count, increment };
  },
};

결과

• count.value가 변하면, 이를 사용하는 컴포넌트도 자동으로 업데이트.
• 언제 사용?
  • 단일 변수(숫자, 문자열 등)를 다룰 때.
  • 또는 기본적으로 값을 감싼 객체를 원할 때.

---

2. reactive

• 객체, 배열 또는 복잡한 데이터 구조를 반응형으로 만들 때 사용.
• 특징: 객체 자체를 감싸며, .value 없이 직접 속성에 접근 가능.

사용 예시

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Vue 3!',
    });

    const increment = () => {
      state.count++; // .value 필요 없음
    };

    return { state, increment };
  },
};

결과

• state.count나 state.message가 변하면, 이를 사용하는 컴포넌트가 자동으로 업데이트.
• 언제 사용?
  • 여러 속성을 가진 객체를 다룰 때.
  • 배열, 중첩된 데이터 구조를 처리할 때.

---

3. 핵심 차이

특징	ref	reactive
사용 대상	단일 값 (숫자, 문자열 등)	객체, 배열, 복잡한 데이터 구조
접근 방식	.value로 접근	속성에 바로 접근
반응형 전환 방식	값을 감싼 객체 생성	객체/배열 자체를 반응형으로 변환
중첩 데이터 처리	중첩 객체나 배열은 추가로 reactive 필요	중첩된 데이터도 자동 반응형 처리

---

4. 둘을 함께 사용하는 경우

• reactive는 객체 전체를 반응형으로 만들지만, 개별 속성을 추적하려면 ref를 사용할 수 있음.

예시

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      user: {
        name: ref('Alice'), // 개별 속성을 ref로
      },
      age: 25,
    });

    const updateName = () => {
      state.user.name.value = 'Bob'; // .value 사용
    };

    return { state, updateName };
  },
};

---

5. 요약

• ref: 단일 값을 선물 상자에 넣어서 .value로 꺼내 쓰는 것.
• reactive: 객체나 배열을 투명한 박스로 감싸서 바로 속성을 볼 수 있는 것.