ref, reactive, toRef, toRefs, 자바스크립트 프록시

테스트화면 RefImpl객체와 프록시객체

자바스크립트의 프록시?

JavaScript의 Proxy 객체는 객체에 대한 작업을 가로채고, 필요에 따라 이러한 작업을 조작하는 기능을 제공합니다.

이는 Vue.js의 반응성 시스템의 핵심입니다.

예를 들어, 객체에 새로운 속성을 추가하거나 기존 속성을 변경할 때 이를 감지하고 필요한 반응을 트리거할 수 있습니다.

즉, 변수를 저장하고 해당 변수의 값을 읽고 실행할때마다 동작을 추가할수있다는것

자바스크립트의 proxy예제

let target = {
    message: "Hello, world!"
};

let handler = {
    get: function(obj, prop) {
        if (prop in obj) {
            console.log(`${prop} 속성을 가져오는 중`);
            return obj[prop];
        } else {
            return `${prop} 속성을 찾을 수 없습니다`;
        }
    },
    set: function(obj, prop, value) {
        console.log(`${prop} 속성을 "${value}"로 설정하는 중`);
        obj[prop] = value;
        return true;
    }
};

let proxy = new Proxy(target, handler);

console.log(proxy.message);  // '${prop} 속성을 가져오는 중'이 출력된 후 'Hello, world!' 출력
proxy.message = "Goodbye!";  // '${prop} 속성을 "Goodbye!"로 설정하는 중'이 출력
console.log(proxy.message);  // '${prop} 속성을 가져오는 중'이 출력된 후 'Goodbye!' 출력

ref, reactive, toRef, toRefs

ref:
- 어떤 타입의 값이든 받을 수 있으며
- RefImpl 객체로 랩핑(감싸진)된 반응성 객체를 가집니다.
- 반응성이 있는 값을 접근할 때 .value를 사용합니다.
- 템플릿에서는 .value 없이 바로 접근할 수 있어 편리합니다.
reactive:
- 배열과 객체만을 반응성 객체로 만들 수 있습니다.
- 이미 언랩핑된 상태로, .value를 사용하지 않고 직접 접근합니다. ( 자바스크립트의 proxy를 이용하기때문 )
- 재할당 시 반응성이 사라지는 문제를 해결하기 위해 toRef를 사용할 수 있습니다.
  (자식 컴포넌트에서 props로 데이터를 받은후 props를 재할당해서 사용하는 경우 반응성이 사라짐. 해결하기 위해서 toRef를 사용해야함 => 동작화면에서 자식 화면 참고)
```
// reactive 내에서 state로 접근가능
const state = reactive({
  count: 0,
  double: computed(() => state.count * 2)
})
```
toRef와 toRefs:
- toRef는 reactive 객체 내의 특정 속성을 ref로 변환할 때 사용합니다.
- toRefs는 reactive 객체의 모든 속성을 각각의 ref로 변환합니다.
- 이 방법을 사용하면 reactive 객체의 속성들을 개별적인 ref로 관리할 수 있으며, 이들은 원본 reactive 객체와 동기화된 상태를 유지합니다.

// 기존 reactive의 문제점
const words = reactive({a:"a",b:"b"})
const msg = words.a // a = 1 (반응형 풀림)

// toref
reactive의 데이터중 하나를 ref로 만들기 위해
const words = reactive({a:"1",b:"2"})
const msg = toRef(words, 'a') // a = 1 (반응형 있음)

// torefs
reactive의 데이터들을 각각 ref로 만들기 위해
const words = reactive({a:"1",b:"2"})
const {a,b} = toRefs(words) // a = 1 (반응형 있음)

ref와 reactive의 차이

ref와 reactive의 차이

ref와 reactive는 Vue.js에서 반환하는 반응성 객체가 다릅니다.
reactive는 자바스크립트의 Proxy 객체를 사용하여 객체나 배열에 반응성을 부여합니다.
ref는 Vue.js에서 제공하는 RefImpl이라는 객체를 사용하여 원시값(예: 문자열, 숫자) 및 객체에 반응성을 부여합니다.
RefImpl 객체는 .value 속성을 통해 내부 값을 접근하고 조작할 수 있습니다.

위의 반응형 객체의 반환형이 다른이유