[Vue] 반응형객체 ref() ??? reactive()???

ref() 란???

• 전달된 값을 갖게 되고, 이것을 가리키는 단일 속성 .value가 있는 변경 가능한 반응형 ref 객체를 반환
• ref 객체는 반응형이며, .value 속성에 새 값을 할당할 수 있다.
• 즉, .value 에 대한 모든 읽기 작업이 추적되고, 쓰기 작업은 관련 이펙트를 트리거한다.
• 객체가 ref의 값(.value)으로 할당되면, reactive()로 내부 깊숙이(deeply) 반응한다.
• 객체 내부 깊숙이 ref가 포함되어 있으면, 언래핑됨을 의미
• 내부 깊숙이까지 변환되는 것을 방지하려면,shallowRef()를 사용
• ref 의 장점?
  • 타입 제한 없이 사용 가능하다.
  • 템플릿에서 단일 변수로 사용할 수 있다.

래핑, 언래핑의 개념이 혼란스러울 경우??

어떤 값이 ref에 할당되어 있다고 가정합시다.
이 때, .value를 통해 할당된 값에 접근해야 한다면 "래핑"된 것이고, .value 없이 접근된다면 "언래핑"된 것이라고 이해할 수 있습니다.

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

---

reactive() 란???

• 객체의 반응형 프락시(proxy) 를 반환한다.
• 반응형 변환은 "내부 깊숙이 있는(deep)" 모든 중첩 속성에 영향을 준다.
• 또한, 반응형 객체는 내부 깊숙이 있는 모든 refs 속성의 반응형을 유지하면서 언래핑한다.
• 그러나 Map 같은 네이티브 컬렉션 타입 또는 반응형 배열의 요소인 ref로 접근할 때는 언래핑 되지 않음에 유의
• 내부 깊은 곳까지의 변환은 피하고 루트 수준에서만 반응형을 유지하려면, shallowReactive() 를 사용
• 반환된 객체와 중첩된 객체는 프락시(Proxy)로 래핑되므로, 원본 객체와 동일하지 않다. 그러므로 반응형 프락시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋다.
• reactive 의 장점
  • 자바스크립트와 템플릿 사이에 일관성이 있다.
  • 반응형 변수를 많이 선언할 때 간단하게 사용 가능하다.
  • vue2 의 data() 와 비슷하다.

// ref 언래핑 :

const count = ref(1)
const obj = reactive({ count })

// obj.count인 ref는 언래핑 됨
console.log(obj.count === count.value) // true

// `obj.count`도 업데이트 됨
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// `count` ref도 업데이트 됨
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

// 배열또는 컬렉션앨리먼트는 ref 에 접근할 때 언래핑되지 않는다 :

const books = reactive([ref('Vue 3 Guide')])
// .value 필요
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// .value 필요
console.log(map.get('count').value)

// ref를 reactive 속성에 할당하면, 해당 ref도 자동으로 언래핑됩니다:

const count = ref(1)
const obj = reactive({})

obj.count = count

console.log(obj.count) // 1
console.log(obj.count === count.value) // true

---

ref 와 reactive 의 차이점 ????

1. 타입제한
   • ref에서는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있다.
   • reactive 에서는 Object, array, Map, Set 과 같은 타입에서만 사용 가능하다.
2. 접근방식
   • ref 에서는 .value property 를 붙여 접근 할 수 있다. <templete> 에서 변수를 명시할 때에는 붙일 필요 없다.
   • reactive 에서는 .value 를 붙일 필요가 없이 <templete> 에서 사용하는 자바스크립트 문법 처럼 사용