ref와 reactive의 차이점은 무엇인가요?

Question

Accepted Answer

둘 다 Composition API에서 **반응형 상태**를 만들지만 동작 방식이 다릅니다. `ref`는 **모든** 값(원시 값 포함)을 반응형 컨테이너로 감싸고, `reactive`는 **객체**를 직접 깊은 반응형으로 만듭니다. ## ref — 모든 값에 사용, .value로 접근 ```vue ``` 핵심 특성: JavaScript에서는 `.value`를 통해 ref에 접근하지만, 템플릿에서는 Vue가 자동으로 언래핑합니다. 스크립트에서 `.value`를 빠뜨리는 것이 가장 흔한 초보자 버그입니다. ## reactive — 객체에 사용, .value 없음 ```vue ``` `reactive`는 객체/배열에서만 동작하며(원시 값은 불가), 속성을 직접 사용합니다. ## reactive의 함정: 구조 분해나 재할당 금지 ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ 반응성 깨짐 (반응형 프록시 손실) const { count } = state; // ❌ 구조 분해 시 반응성 손실 ``` `reactive` 객체를 재할당하거나 속성을 구조 분해하면 반응성과 **연결이 끊어집니다** — 자주 발생하는 함정입니다. `ref`는 이 문제가 없습니다(`.value`를 재할당하면 됨). ## 어느 것을 사용할까 ```text ref → 원시 값, 그리고 권장 기본값 (모든 것에 동작, 재할당 쉬움) reactive → .value 없이 상태를 객체로 묶고 싶을 때 (단, 구조 분해 주의) ``` 많은 팀이 일관성을 위해 **`ref`만** 사용하도록 표준화합니다. ## 왜 중요한가 `ref`와 `reactive`는 Vue 3 Composition API 상태의 기초입니다. `ref`는 스크립트에서 `.value`가 필요하고(템플릿에서는 자동 언래핑), `reactive`는 재할당/구조 분해 시 반응성을 잃는다는 점을 이해하면 Vue에서 가장 흔한 두 가지 반응성 버그를 예방할 수 있습니다.