ref, reactive 어떤 것이 더 좋을까? ref와 reactive 차이점

 

 

 

목차

• ref()는 무엇인가?
• reactive()는 무엇인가?
• ref()와 reactive()의 차이점
• ref(), reactive() 어떤것을 쓰면 좋을까?

 

vue3(Composition api)에서 반응형 data를 사용하는 방법에는 ref, reactive가 있습니다.

<!--vue 3 미만-->
<script>
export default {
  data() {
    return {
      //데이터 정의 , 정의 후 this.변수명으로 접근 
    }
  }
}
</script>


<!--vue 3-->
<script setup>
import {ref, reactive} from "vue";
const refVar = ref(초기값);
const reactiveVar = reactive({}); //초기값 타입은 object
</script>

 

1. ref()는 무엇인가?

---

반응형데이터를 사용할때 쓰이는 vue3에서 추가된 Composition API이며 원시타입일 때 주로 사용합니다. 

(String, Number, Boolean...) 

 

 

.value 속성에 새값을 할당 할 수 있습니다. 즉, .value로 변화하는 값을 즉시사용할 수 있으며 즉시 변화시킬 수도 있습니다.

 

주로 원시타입일 때 사용하지만 object 타입도 사용 가능합니다. (Array, Object..)

Object가 ref의 값으로 할당되면 reactive()로 내부 깊숙히 반응하게 됩니다. 

 

ref()는 내부에 값을 취하는 ref Object를 반환하는데,

component나 view에서 해당 ref를 사용할 때는 ref변수명을 그대로 사용합니다. (내부값을 자동으로 언래핑 됩니다.)

 

 

래핑, 언래핑이란?
어떤 값이 ref에 할당 되어있다고 가정한다면
이때  .value를 통해 할당된 값에 접근해야 한다면 [래핑] 된것이고,
.value 없이 접근 가능하다면 언래핑 된것입니다.

 

 

js에서는 ref변수명.value로 접근 가능합니다.

 

[사용방법 .vue]

<template>
<!--refVal로 접근-->
{{refVal}}
</template>

<script>
import {ref} from "vue";

const refVal = ref(0);
//refVal.value로 접근
</script>

 

 

[사용방법 js]

//js 혹은 <script>태그에 import
import {ref} from "vue";

//특별하게 변수타입을 지정하지 않아도 초기값으로 유추합니다.
const refVal = ref(초기값);

//example
const refNum = ref(0);
refNum.value = "string value"; // 브라우저 콘솔에 warning이 찍힙니다. number를 기대했는데 왜 String이야??라는 메세지를 볼 수 있습니다.

//값을 변경할때
refVal.value = 변경할 값;

 

 

 

 

2. reactive()는 무엇인가?

---

reactive()는 ref()와 다르게 원시타입을 사용할 수 없습니다. 즉 object, array만 사용 가능합니다.

reactive안에는 함수도 집어넣을 수 있습니다.

 

<script setup>
import {reactive} from "vue";

const calculator = reactive({
  initNum: 3,
  changePercent: computed(()=> `${state.initNum}%`)
})
</script>

 

 

이거를 template에서 쓰기 위해서는 아래와 같이 사용하면 됩니다.

<template>
{{calculator.initNum}}
{{calculator.changePercent}}
</template>

 

 

 

 

3. ref() vs reactive() 차이점

---

•  ref()에서는 String, Number Object등 어떤 타입이든 사용가능합니다. 
• reactive()에서는 Object타입만 가능합니다. (Object, Array, Map, Set)
• ref()는 .value를 통해서 접근할 수 있고 reative()는  붙이지 않아도 그냥 접근 가능합니다.
• reactive()는 함수를 넣을 수 있습니다.
• object일 경우  ref()는 재할당 하면 반응형을 유지하지만 reactive()는 재할당하면 반응형을 잃어버립니다. (아래코드참고)

 

 

let refObj = ref({});
let reactiveObj = reactive({});


const newData = {name: 'dfdf'};

//얕은복사로 재할당
refObj.value = {...newData};
reactiveObj = {...newData};

console.log(refObj); //RefImpl
console.log(reactiveObj); //그냥 Object

 

 

 

4. ref() , reactive() 어떤 것을 사용하는 것이 좋을까?

 

---

둘다 반응형 데이터 작성이 가능하며 반응형 프록시를 얻을 수 있습니다.

케바케 이지만 팀내 코드컨벤션에 따르거나, 코드 가독성을 위해 한가지만 선택해서 일관되게 사용하는 것이 좋은 사례라고 합니다. 

 

reactive는 일반 변수와 같이 변수명을 그대로 가져다 쓸 수 있으므로 ref()를 쓰는것이 ref 변수명.value라고 접근이 가능해서 차별화를 둘 수 있으므로 가독성 및 유지보수에 좋다고 합니다!

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡

 

참고: https://velog.io/@katanazero86/Ref-Reactive