반응형 핵심 — ref 와 reactive

Vue의 마법은 반응형 시스템에서 나옵니다. 데이터가 바뀌면 그 데이터를 쓰는 화면이 자동으로 갱신되죠. 이걸 만드는 두 도구가 ref 와 reactive 입니다. 둘은 비슷해 보이지만 다루는 방식이 달라서, 차이를 정확히 알아야 반응성을 잃는 실수를 피할 수 있습니다.

학습 목표

• ref 와 reactive 의 차이와 각각의 사용처를 안다.
• .value 가 언제 필요한지 이해한다.
• toRef·toRefs 로 반응성을 유지하며 값을 꺼낸다.
• 반응성을 잃는 흔한 실수를 피한다.

ref — 어떤 값이든 감싼다

ref 는 숫자·문자열·객체 등 모든 종류의 값을 감쌀 수 있습니다. 진짜 값은 .value 에 들어 있습니다.

import { ref } from 'vue';

const count = ref(0);
const user = ref({ name: '민수' });

count.value++;             // 1
user.value.name = '영희';  // 객체 속성도 .value 거쳐서 접근

template 안에서는 .value 없이 그대로 씁니다. Vue가 알아서 풀어줍니다.

reactive — 객체 전용

reactive 는 객체나 배열을 통째로 반응형으로 만듭니다. .value 가 없고 일반 객체처럼 다룹니다.

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: { name: '민수' },
});

state.count++;            // .value 없이 바로
state.user.name = '영희';

⚠️ 주의 — reactive 는 원시값(숫자·문자열·boolean)에는 쓸 수 없습니다. reactive(0) 은 동작하지 않습니다. 원시값은 ref 를 쓰세요.

ref vs reactive — 무엇을 쓸까

실무에서는 일관성을 위해 ref 를 기본으로 쓰는 팀이 많습니다. 원시값과 객체를 같은 방식(.value)으로 다룰 수 있기 때문입니다.

💡 TIP — ref 에 객체를 담으면 Vue가 내부적으로 그 객체를 reactive 로 감쌉니다. 그래서 user.value.name = ... 같은 깊은 변경도 반응합니다.

반응성을 잃지 않기

reactive 객체에서 속성을 분해 할당하면 반응성이 끊깁니다. 이때 toRefs·toRef 를 씁니다.

import { reactive, toRefs, toRef } from 'vue';

const state = reactive({ count: 0, name: '민수' });

// X 반응성 끊김 — 그냥 값이 복사됨
const { count } = state;

// O toRefs — 각 속성을 ref 로 변환, 연결 유지
const { count: countRef, name } = toRefs(state);
countRef.value++;          // state.count 도 함께 바뀜

// O toRef — 특정 한 속성만
const nameRef = toRef(state, 'name');

toRefs 는 컴포저블(8강)에서 객체로 묶은 상태를 분해해 반환할 때 특히 유용합니다.

⚠️ 주의 — reactive 객체 전체를 새 객체로 재할당(state = {...})하면 연결이 끊깁니다. 속성만 바꾸거나, 처음부터 ref 로 만들어 obj.value = 새객체 로 교체하세요.

요약

• ref 는 모든 값을 감싸며 .value 로 접근한다.
• reactive 는 객체·배열 전용이고 직접 접근한다.
• 원시값엔 ref, 일관성을 위해 ref 를 기본으로 쓰는 게 무난하다.
• 분해 할당 시 반응성을 지키려면 toRefs/toRef 를 쓴다.

연습문제

1. ref(0) 로 만든 count 를 1초마다 증가시키는 코드를 작성해 보세요. (setInterval 활용)
2. reactive({ name: '', age: 0 }) 상태를 만들고 폼처럼 두 값을 바꾸는 함수를 작성해 보세요.
3. 2번의 reactive 객체를 toRefs 로 분해해 name, age 를 따로 꺼내고, 값이 여전히 연동되는지 확인해 보세요.
4. ref({ a: 1 }) 에서 객체를 통째로 obj.value = { a: 99 } 로 교체했을 때 화면이 갱신되는지 설명해 보세요.

힌트 — setInterval(() => count.value++, 1000). toRefs 결과는 각각 ref라서 .value 가 필요합니다.