vue에서 자바스크립트를 작성할 경우 options API 방식과 composition API 방식 두가지가 존재한다.
- options API의 반응형 reactive
options API에서 반응형 변수를 선언할 때 data() 함수에 {key : value} 형태로 작성한다.
이때 해당 객체는 자바스크립트의 proxy 객체로 감싸이게 된다.
이로서 this.property 로 해당 변수에 접근할 경우 proxy 객체를 통해 변경사항이 추적되는 반응형을 가지게 된다.
그리고 이 방식은 composition API의 reactive() 함수로 객체를 랩핑하는 방식과 동일하다.
- composition API의 반응형 ref, reactive
composition API에서 반응형 변수를 선언하는 방법은 두가지가 존재한다.
그리고 두가지의 방법 모두 변수의 변경을 추적하기위해서 동일하게 javascript proxy 객체를 사용한다.
그렇다면 ref와 reactive의 차이는 무엇일까?
개인적으로 두 가지 선언 방식에 근본적인 차이는 없다고 생각된다.
- ref
vueJS의 공식 레퍼런스를 확인해보면 해당 함수로 변수,객체를 감쌀경우 타겟은 .value 라는 프로퍼티에 담기게 된다.
그리고 reactive로 내부 깊숙이 반응하게 된다고 적여있다.
즉, 기존의 방식인 reacitve 방식에서 proxy 객체를 이용하여 변경을 추적하기 때문에, 이를 인식하기 위한 트리거가 필요하게 된다.(.property 선언과 같은)
이를 위해 number,string 과 같은 변수들은 프로퍼티 호출을 해줄 수 있게 만들어주어야 되기 때문에 ref() 함수를 통해 .value를 트리거로 사용할 수 있게 한 것이라고 생각된다.
<script setup lang="ts">
const test1 = ref("test1")
const test2 = ref({})
console.log(test.value) // output: text1
console.log(test2.value) // output: proxy{}
<script>
<template> //template 내부에서 사용시에는 value를 생략할 수 있다.위와 같이 {}와 같은 객체를 입력하고 확인해보면 proxy 객체가 출력되는 것을 확인 할 수 있다.
- reactive
해당 함수로 감싸인 모든 객체,변수를 poxy 객체로 감싼 후 반환한다.
이때 내부 깊숙이 있는 모든 중첩 속성의 변경을 추적하게 된다.
그리고 내부에 ref 속성이 존재할 경우 .value를 생략하고(언래핑) 호출 할 수 있도록 해준다.
<script setup lang="ts">
let test1 = ref(0)
let test2 = reactive({t:test1})
// ref로 랩핑된 객체이지만 바로 접근이 가능하며 test1의 반응형이 유지된다.
test2.t = 1 // = test1.value = 1
<script>어떤걸 사용해야 할까?
composition API를 사용할 때 ref와 reactive 어느걸 사용하더라도 결국 proxy 객체를 통한 추적이 이루어지게 된다. 하지만 reactive는 number나 string 과 같은 타입을 랭핑할 수 없다.
결국 ref를 혼용 사용하게 되기 때문에 변경에 혼란을 가져올 수 있다.
그렇기 때문에 ref 만을 사용하여 반응형을 선언하는 것이 변경에 대한 혼란을 줄일 수 있다고 생각 된다.
