toValue()와 toRaw() (feat. MaybeRefOrGetter<T>, Proxy)

Vue는 진짜 웬만하면 다 적응한 것 같은데 이 vue-query쪽이랑 관련된것들은 아직도 너무 어려움...

정리하기 전에 MaybeRefOrGetter<T>와 Proxy가 뭔지를 알아야 한다.

 

+ MaybeRefOrGetter<T>

ref든 값이든 함수든 알아서 꺼내쓸 수 있도록 해주는 유틸 타입

type MaybeRefOrGetter<T> = T | Ref<T> | (() => T)

이런 느낌인데, 1️⃣ 그냥 값(T)일수도 있고, 2️⃣ Ref(T)일수도 있고, 3️⃣ getter함수(T)일수도 있는데, 그 값이 무엇이든 이 세가지를 전부 받을 수 있다.

 

+ Proxy

넓은 의미로 클라이언트 - 서버 사이에서 요청과 응답을 대신 처리하고 전달하는 "대리인" 역할

➡️ 일반적인 네트워크(인터넷) : 클라이언트의 웹 브라우저 요청을 대신 받아서 서버에 전달, 웹사이트의 응답을 다시 전달하는 중개 서버

➡️ 자바스크립트(Vue3 등) : 코드(클라이언트)가 객체(서버 역할)의 값을 읽거나(get) 쓰는(set)하는 동작을 가로채서(intercept)  반응형 시스템이 필요한 추가 작업(감지/기록/알림, Handler)을 할 수 있도록 도와주는 대리 객체)

지피티 설명 👽

 

1️⃣ 네트워크 Proxy

• 클라이언트와 서버 사이에서 요청/응답을 대신 처리해주는 중개자.
• 예: 웹 브라우저가 서버에 직접 요청하는 대신 Proxy 서버를 거쳐서 요청 → 서버 응답 → 브라우저 전달.

2️⃣ 자바스크립트 Proxy

• Proxy 객체는 JS에서 제공하는 내장 객체.
• 역할 = "대리인"
  • 객체의 값을 읽거나(get) 쓰는(set) 동작을 가로채(intercept)
  • 추가 작업 수행 가능: 감지, 기록, 알림, 반응형 업데이트 등
• Vue 3의 reactive()나 ref()가 내부적으로 Proxy를 사용해서 반응형 시스템 구현

Vue3의 반응형 시스템의 핵심이다

 

Vue3에서 reactive()는 내부적으로 Proxy를 사용하는데, 그래서 reactive(obj)를 사용하면 Vue는 obj의 값을 읽을 때/바꿀 때 감지해서 반응형 시스템(reactivity)에 기록한다.

 

이게 이해가 됬다는 전제 하에

 

1. toValue()

그 어떠한 값이 들어오든 실제 값만 뽑아서 T(실제 값)로 반환해주는 함수

ref로 들어오든, 일반 값이 들어오든, 함수로 들어오든 전부 상관 없이 실제 값만 출력한다. 

const a = ref(10)
const b = () => 20
const c = 30

console.log(toValue(a)) // 10 (ref라서 .value 꺼내줌)
console.log(toValue(b)) // 20 (함수라서 실행 결과 꺼냄)
console.log(toValue(c)) // 30 (그냥 값은 그대로 반환)

이런식으로 항상 실제값(10, 20, 30)만 얻는다.

• 무조건 MaybeRefOrGetter<T>일 필요는 없고, reactive나 원시값(primitive type)이어도 그 안의 값을 항상 "기본값"으로 해준다.
• 항상 해당 값의 반응형 값을 까서 확인하기 때문에(= 호출 시점의 실제 값을 반환하기 때문에), 반응형에서 값을 확인할 때 매우 유용하다.

ref가 박스라면 toValue는 박스를 까고 그 안의 값을 무조건 확인하는 함수

 

2. toRaw()

Vue에서 반응형 시스템을 제거하고(= Proxy 껍데기를 벗기고) 순수한 원시 객체나 값을 반환할 때 사용하는것.

Vue의 반응형을 제거한다.

1️⃣반응형 객체의 내부 원시 데이터에 접근할 때

2️⃣반응형 시스템이 필요하지 않을 때

사용할 수 있다. "반응형 추적 제거 역할"