$$config title: [vue3] ref와 reactive 사용법과 차이점 keywords: - IT - ... $$ # 개요 ref와 reactive를 활용하면 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있음 # ref ## 새롭게 정의된 ref Vue3 이전에는 뷰 템플릿의 DOM 또는 컴포넌트를 가리키는 속성이었지만, Vue3에서는 reactive reference를 의미 ## ref 사용하는 방법 ` ``` # reactive ## reactive 사용하는 방법 ` ``` # 차이점 1. 타입 제한 - `ref`에서는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있습니다. - 반면 `reactive`에서는 Object, array, Map, Set과 같은 타입에서만 사용할 수 있습니다. 2. 접근 방식 - `ref`에서는 .value property를 붙여 접근할 수 있습니다. ``에서 변수를 명시할 때에는 붙일 필요가 없습니다. - `reactive`에서는 .value를 붙일 필요가 없이 ``에서 사용하는 자바스크립트 문법처럼 사용하시면 됩니다. # 둘 중 무엇을 사용해야 할까? 1. ref의 장점 - 타입 제한 없이 사용 가능함 - 템플릿에서 단일 변수로 사용할 수 있음 2. reactive의 장점 - 자바스크립트와 템플릿 사이에 일관성이 있음 - 반응형 변수를 많이 선언할 때 간단하게 사용 가능 - Vue2의 data()와 비슷함 # 참고자료 [[Vue.js] Vue3에서 ref와 reactive 사용법과 차이점](https://velog.io/@yeonsubaek/Vue.js-rel-reactive-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B0%92-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0)