ref(), reactive() 차이점

ref(), reactive() 차이점, 반응형, 반응성, 차이, 원시형 타입의 차이

찬찬잉

Sep 14, 2023

Contents

ref와 reactive의 차이점 Vue2 기존 방식 Vue3 변경 된 방식

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의 사용법은 정확하게 이해해야한다. 실제로 많이 사용되고 있어서 절대 우습게 생각하고 넘기면 안될듯하여 풀어보았다.

<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>