[Vue.js] 반응형 ref와 reactive 알아보기

[반응형]

반응형을 한마디로 정의하라고 하면,,

무언가의 변화를 감지하여 반응하는 것

이라고 표현하고 싶습니다.

 

예를 들어,

	A
1	10
2	20
3	30

이러한 엑셀 시트가 있다고 생각해 봅시다. A3는 '=SUM(A1:A2)'라는 함수가 담겨 30이라는 값을 나타내는데요. 여기서 만약 A2의 값을 15로 설정하였다면 A3은 어떻게 바뀔까요?

	A
1	10
2	15
3	25

당연히 10 + 15 = 25 이므로 A3는 25라는 값을 나타낼 것입니다.

이러한 것이 반응형의 대표적인 예라고 할 수 있습니다!

 

반응형에 대해 알았으니 반응형이 엑셀 시트처럼 자동으로 적용되는지 알아봅시다.

let A1 = 10;
let A2 = 20;
let A3 = A1 + A2;

console.log('A3의 값: ',A3);	// 30

A2 = 15;
console.log('A3의 값: ',A3);	// 30

A2의 값이 20에서 15로 변화했지만, A3가 그 변화를 감지하여 반응할 수 없어요. 이처럼 바닐라 자바스크립트는 로컬 변수의 read 및 write를 추적할 수 없음을 알 수 있습니다.

 

보시다시피 추가적인 작업이 없는 한 변화를 감지할 수 없는데... 어떻게 해야 반응형을 적용할 수 있을까요?

바로, 객체 속성의 read 및 write를 하기 전에 가로채는 것입니다! A3가 A2의 값을 가져올 때 미리 가로채서 재정의를 할 수 있습니다.

속성 접근을 가로채는 방법 중 하나가 proxy입니다.

---

[Proxy]

Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 추가적인 작업을 수행하거나 재정의할 수 있습니다.

target과 handler 두 매개변수를 사용하여 proxy를 정의할 수 있습니다.

target - 프록시할 원본 객체
handler - 프록시하는 동작을 재정의

따라서 이러한 Proxy API를 통해 Vue는 반응성을 가질 수 있습니다!

 

Proxy와 관련하여 더 Deep하게 들어갈 수 있지만,,, 추후에 포스팅해 볼게요!

---

[ref]

Composition API에서는 ref()함수를 사용하여 반응형 상태를 선언하도록 권장합니다. ref의 효과를 보는 가장 좋은 방법은 DOM을 업데이트하는 것입니다.

<script setup>
import { ref } from 'vue'

const num = ref(1);

const increment = () => {
  num.value++;
}
</script>

<template>
  <h1>{{ num }}</h1>
  <button @click="increment()">버튼</button>
</template>

직접 테스트 해보기

Vue SFC Playground

ref의 가장 큰 특징은 스크립트 영역에서 .value 속성을 통해 변수에 접근합니다.  컴포넌트 템플릿 영역 안에서 사용하려면 해당 속성으로 접근할 필요가 없습니다.

또한 Number, String과 같은 Primitive type과 Array, Map과 같은 Object type 모두 반응형 상태로 선언할 수 있습니다.

ref는 깊은 반응형을 가지고 있는데 Non-primitive type인 경우에는 reactive()를 통해 반응형 프록시로 변환됩니다.

 

Vue는 렌더링 과정에서 사용된 모든 ref를 추적합니다. ref가 변경되면 이를 추적하는 컴포넌트에 대해 재렌더링을 트리거하기 때문에 무분별한 ref 사용을 피하는 것이 좋다고 생각되네요..!

---

[reactive]

반응형 상태를 선언하는 또다른 방법은 reactive()입니다. 내부값을 value라는 키 값에 파라미터를 매칭한 특수 객체로 감싸는 ref와는 다르게 reactive는 객체 자체를 반응형으로 만듭니다.

<script setup>
import { reactive } from 'vue'

const info = reactive({
  age: 26,
  name: 'silverCastle',
});
const change = () => {
  info.age++;
}
</script>

<template>
  <h1>{{ info }}</h1>
  <button @click="change()">버튼</button>
</template>

직접 테스트 해보기

Vue SFC Playground

reactive의 가장 큰 특징은 ref와 다르게 스크립트 영역에서 .value를 사용할 필요가 없습니다.

Array, Map과 같은 Object type에만 반응형 상태로 선언할 수 있습니다.

reactive의 반환값은 원본 객체와 같지 않고 원본 객체를 재정의한 Proxy라는 점을 유의해야 합니다.

---

[마무리]

저는 최근에야 Vue.js를 처음 사용하고 javascript라는 언어도 처음이었는데요..

ref와 reactive에 대해 잘 모르는 상태에서 반응형 데이터를 다루었는데 막상 정리해보니 차이점이 분명히 있다는 것을 알게 되었습니다!

혹여라도 틀린 내용이 있다면 댓글로 말씀해주세요 😎