Vue3에서의 상태 관리: ref()와 reactive()의 차이와 사용법

Vue3에서는 Composition API를 통해 상태를 정의하는 방식이 달라졌습니다. 특히, 가장 많이 사용되는 두 가지 핵심 함수는 바로 ref()와 reactive()입니다. 이 둘의 차이와 사용법을 잘 이해하면 Vue3의 반응형 시스템을 제대로 활용할 수 있어요.

1. ref()란?

ref()는 기본형 데이터 또는 단일 값을 반응형으로 만들기 위한 함수입니다. 숫자, 문자열, 불리언 등 프리미티브 타입을 주로 감쌀 때 사용합니다.

import { ref } from 'vue'

const count = ref(0)     // 숫자 상태
const message = ref('hi') // 문자열 상태

• .value로 실제 값에 접근하거나 수정해야 함
• 템플릿에서는 .value 없이 바로 사용 가능

console.log(count.value) // 0
count.value++            // 1

<template>
  <p>{{ count }}</p> <!-- 템플릿에서는 .value 없이 사용 -->
</template>

2. reactive()란?

reactive()는 객체 전체를 반응형으로 만드는 함수입니다. 여러 개의 상태를 하나의 객체에 담아 관리할 때 유용합니다.

import { reactive } from 'vue'

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

• 객체 내부 속성은 자동으로 반응형 처리됨
• .value 사용 안 함 → 객체 그대로 사용

console.log(state.count) // 0
state.count++            // 1

<template>
  <p>{{ state.count }}</p>
  <p>{{ state.message }}</p>
</template>

3. ref vs reactive: 차이점 정리

구분	ref()	reactive()
사용 대상	기본형 데이터 / 단일 값	객체, 배열 등 복합 데이터
접근 방식	.value 필요 (count.value)	속성으로 바로 접근 (state.count)
내부 처리	객체로 래핑됨 ({ value: ... })	프록시 객체로 전체를 감쌈
템플릿 접근	.value 없이 사용 가능	그대로 사용 가능
구조 분해 시	반응형 깨질 수 있음	일반 객체처럼 동작

4. reactive로 배열도 만들 수 있을까?

물론 가능합니다.

const list = reactive([1, 2, 3])
list.push(4)

다만, 배열이나 객체 속 깊은 값에 접근할 땐 Vue가 변화를 감지하지 못하는 경우도 있으니 조심해야 합니다. 복잡한 구조일수록 ref()와 reactive()를 적절히 조합해서 사용하는 것이 좋습니다.

5. 조합해서 쓰는 예시

const state = reactive({
  count: ref(0),
  name: 'Vue3'
})

state.count.value++ // 이렇게 내부 ref는 .value 필요

 

Vue3에서 상태를 선언할 때는 ref는 값 하나, reactive는 객체 전체를 다룰 때 사용하세요.이 차이만 잘 이해하면 Composition API의 핵심 개념도 자연스럽게 따라올 거예요.