ref vs reactive
ref()와 reactive()는 둘 다 Vue reactivity API다.[1] 이 비교는 reactivity 자체의 차이가 아니라 state shape와 access style 선택 문제를 다룬다 — 둘을 framework 철학의 대립처럼 보면 과하게 쪼개진 지식이 된다. 단순 값, primitive, 전체 교체 가능성이 큰 state는 ref()가 기본 선택이고, 응집된 object/array의 property를 직접 갱신하는 state는 reactive()가 자연스럽다는 관점에서 정리할 수 있다.
ref() vs reactive() 비교표
| 기준 | ref() |
reactive() |
|---|---|---|
| 적합한 state shape | primitive, single value, 교체 가능한 값 | object, array, collection |
| primitive 지원 | 가능 | 불가 |
| script 접근 | .value 필요 |
property 직접 접근 |
| template 접근 | 자동 unwrap | property 직접 접근 |
| 전체 교체 | 자연스러움 | 주의 필요 |
| 대표 예 | count, isOpen, selectedId |
form, user, items |
강의는 ref()가 primitive value와 object를 다룰 수 있고, reactive()가 object, array, collection에 적합하다고 소개한다. Template 안에서 ref는 자동 unwrap되고, script에서는 .value가 필요하다.[1:1]
어느 쪽을 먼저 고려할까
ref()를 먼저 고려한다.
- state가 string, number, boolean 같은 primitive다.
reactive()는 primitive를 지원하지 않으므로, primitive value에reactive()를 쓰려는 것은 흔한 실수다. - 값 전체를 교체하는 일이 자연스럽다. Object를 자주 통째로 교체해야 하는데
reactive()로 잡으면 교체마다 다루기 번거로워진다. - component 안에서 작은 state 조각을 독립적으로 다룬다.
reactive()를 고려한다.
- 여러 property가 하나의 object model로 응집되어 있다. 응집된 form object를 많은
ref()로 쪼개면 property 사이의 관계가 흐려진다. - 대부분의 변경이 property update다.
form.email,user.nickname같은 접근이form.value.email보다 읽기 쉽다.
두 API 모두 겉으로 보이는 것보다 경계가 헷갈리기 쉽다. reactive()가 더 큰 state에 항상 좋다는 뜻은 아니다 — 전체 교체가 잦으면 ref()가 더 단순할 수 있다. ref()가 primitive 전용이라는 뜻도 아니다 — object도 담을 수 있지만 .value access style이 생긴다. 그리고 script logic에서 .value를 빼먹는 것도 흔한 실수인데, template unwrap 때문에 script와 template에서 같은 ref가 다르게 보일 수 있기 때문이다.
관련
- Vue reactivity: 이 비교의 상위 개념이다.
- Vue.js: reactivity API 선택은 Vue의 state-driven UI 모델 안에 있다.
출처
테스트 질문
- Boolean toggle은
ref()와reactive()중 어느 쪽이 자연스러운가? - Form object는 언제
reactive()가 더 읽기 쉬운가? ref()와reactive()를 독립 개념으로 과하게 분리하면 무엇을 놓치는가?