vue 3 반응형 - reactive and ref

😎 vue 3 반응형 - reactive and ref

composition API를 기준으로 합니다

 

반응형
vue에서는 데이터의 실시간 업데이트가 가능한 것을 반응형이라고 한다

✅  reactive

reactive() 함수를 사용하여 객체 또는 배열을 반응형으로 만들 수 있다

반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 객체이다

const raw = {}
const proxy = reactive(raw)
// 반응형으로 재정의 된 것은 원본과 같지 않다
console.log(proxy === raw) // false

객체, 배열 또는 Map이나 Set과 같은 컬렉션 유형에만 사용 가능하다

 

reactive 예제

숫자가 증가하며 화면에 실시간 바인딩을 하는 예제이다

reactive 사용 여부에 따른 차이점을 비교해보자

<div>{{ state.count }}</div>
<button @click="state.count++">state.count++</button>
<div>{{ countNormal }}</div>
<button @click="countNormal++">countNormal++</button>


import { reactive } from "vue"

const countNormal = 0
const state = reactive({ count: 0 })

reactive를 사용한 state.count의 실시간 바인딩만 가능하다

이렇게 실시간 바인딩이 가능한 것을 vue에서는 반응형이라고 한다

 

reactive()는 예제를 보면 알 수 있듯이 state.count처럼 특정 값에 접근할 때에는 데이터의 속성으로 접근해야한다

 

✅  ref

ref()는 reactive의 제한 사항을 해결하기 위해, 타입 제한 없이 데이터를 반응형으로 재정의할 수 있는 함수이며

.value 속성을 포함하는 ref 객체로 반환한다

const countRef = ref(0)
console.log(countRef) // { value: 0 }
console.log(countRef.value) // 0
countRef.value++
console.log(countRef.value) // 1

 

 

ref 예제

reactive() 예제와 같이 '숫자가 증가하며 화면에 실시간 바인딩을 하는 예제'를 통해서

reactive와 ref의 문법 차이점을 비교해보자

<div>{{ stateReactive.count }}</div>
<button @click="stateReactive.count++">stateReactive.count++</button>
<div>{{ countRef }}</div>
<button @click="countRef++">countRef++</button>


import { reactive, ref } from "vue"

const stateReactive = reactive({ count: 0 })
console.log(stateReactive.count)

const countRef = ref(0)
console.log(countRef.value)

template에 바인딩을 할 때 ref는 속성이 아닌 해당 데이터에 바로 접근할 수 있기 때문에 reactive에 비해 간단하다

하지만 ref는 script 영역에서 해당 데이터에 접근하기 위해서는 .value를 통해서 접근해야 한다

 

✅  reactive vs ref

• reactive()와 ref() 모두 새로운 객체를 반환한다
• reactive는 객체와 배열 또는 컬렉션 유형만 반응형으로 재정의할 수 있다
• ref는 타입제한 없이 사용 가능하다

reactive와 ref를 혼용할지 하나만을 사용할지에 대한 컨벤션을 정의한 후 해당 컨벤션을 따라가면 된다

 

 

✅  래핑, 언래핑

어떤 값이 ref에 할당되어 있다고 가정한다

이 때, .value를 통해 할당된 값에 접근해야 한다면 "래핑"된 것이고 .value 없이 접근된다면 "언래핑"된 것이다

아래 예제를 보면 script 영역에서는 래핑되어 있고 template 영역에서는 언래핑되어 있다

<div>{{ countRef }}</div>
<button @click="countRef++">countRef++</button>


import { ref } from "vue"

const countRef = ref(0)
console.log(countRef.value)

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/reactivity-fundamentals.html

반응형 기초 | Vue.js