ref(), reactive() 차이점
ref(), reactive() 차이점, 반응형, 반응성, 차이, 원시형 타입의 차이
Sep 14, 2023
vue3에서 Composition API가 새롭게 등장
기존 인스턴스 옵션 단위가 아닌 특정 기능, 논리 단위로 여러 컴포넌트에서 재사용할 수 있도록 하였다.
이중
ref 와 reactive 를 활용하면 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 설정할 수 있다.ref
vue2에서 사용할때 나는 DOM 또는 컴포넌트를 가리킬 때 사용하였다. 하지만 vue3에서는
reactive reference 를 뜻한다.ref 사용법
<script>에import { ref } from "vue";를 import를 한다.
- 변수를 선언하고 값을
ref()로 감싸준다.
- 변수 값을 변경할 때
변수.value에 변경할 값을 넣어준다.
reactive 사용법
<script>에import { reactive } from "vue";를 import를 한다.
- 변수를 선언하고 값을
reactive()로 감싸준다.
property값을 변경할 때변수.property에 변경할 값을 넣어준다.
reactive 주의점
reactive 는 object, array 이외에는 사용이 불가능하다.ref와 reactive의 차이점
- 타입 제한
ref에서는String,Number,Object등 어떠한 타입에서도 사용할 수 있다. 반면reactive에서는Object,array,map,set과 같은 타입에서만 사용이 가능하다.
- 접근 방식
ref에서는.value라는 property를 붙여 접근할 수 있습니다.<templete>에서 변수를 명시할 때에는 붙일 필요가 없다.reactive에서는.value를 붙일 필요가 없이<templete>에서 사용하는 자바스크립트 문법처럼 사용할 수 있다.
Vue2 기존 방식
<template>
<div ref="myElement">Hello, world!</div>
</template>
<script>
export default {
name: 'myElement',
mounted() {
console.log(this.$refs.myElement);
}
}
</script>기존에는 this를 통해서 ref에 설정한 myElement를 $refs로 참조할 수 있었다.
하지만 vue3로 변경 되며 Composition API가 나타나며 this 사용이 불가능해짐에 따라 다른 방법으로 변경되게 된다.
Vue3 변경 된 방식
<template>
<div ref="myElement"> Hello, world </div>
</template>
<script setup>
import { defineComponent, onMounted, ref } from 'vue';
const myElement = ref(null);
onMounted(() => {
console.log(myElement.value);
});
</script>간편해졌다는 생각이 들긴하지만 ref의 사용법은 정확하게 이해해야한다. 실제로 많이 사용되고 있어서 절대 우습게 생각하고 넘기면 안될듯하여 풀어보았다.
Share article
