reactive와 ref 차이

Vue3에서는 reactive와 ref 를 사용해 반응형 상태 (Reactive State)를 관리함

이 두 기능은 비슷하지만 사용 목적과 방식에 차이가 있음

 

아래에서 각 기능의 차이와 언제 사용하는 것이 좋은지 알아보겠음

---

 

1. ref란?

단일 값 또는 원시 데이터 타입 (string, number, boolean 등)을 반응형으로 관리할 때 사용

객체, 배열도 ref로 감쌀 수 있지만, 이 경우 내부 속성에 직접 접근하려면 .value가 필요

import { ref } from 'vue'

const count = ref(0)  // 숫자 값을 반응형으로 관리

count.value++  // ref는 .value로 접근해야 함
console.log(count.value)  // 1

.value로 접근해야만 값에 접근할 수 있음

원시 타입이나 단일 값을 반응형으로 관리할 때 적합

객체나 배열도 ref로 감쌀 수 있지만, .value를 계속 사용해야 하므로 코드가 복잡해질 수 있음

 

---

2. reactive란?

객체(Object)나 배열(Array)과 같은 복합 데이터 타입을 반응형으로 관리할 때 사용

객체 속성에 직접 접근해서 읽거나 쓸 수 있음 (즉, .value가 필요하지 않음)

import { reactive } from 'vue'

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

state.count++  // .value 없이 직접 접근 가능
console.log(state.count)  // 1
console.log(state.message)  // 'Hello'

객체와 배열에 적합한 반응형 상태 관리

.value 없이 객체 속성에 직접 접근 가능

내부적으로 Vue가 Proxy로 감싸서 반응성을 제공

 

---

3. ref와 reactive의 차이

 

---

요약

 

• ref는 단일 값(숫자, 문자열 등)을 다룰 때 적합하며, .value로 접근해야 한다.
• reactive는 객체나 배열과 같은 복합 데이터를 다룰 때 더 적합하며, .value 없이 속성에 직접 접근할 수 있다.
• 둘의 차이점은 사용 대상과 접근 방식에 있다. 적절한 상황에 맞게 두 가지를 혼합하여 사용하면 반응형 상태 관리가 더욱 효과적이다.