Vue 3 Reactivity - Proxy 소개

<div id="app">

</div>

<script>
    var data = {
        a: 10
    }

    var app = new Proxy(data,{
        get() {
            console.log('값 접근');
        },
        set() {
            console.log('값 갱신');
        }
    })
</script>

 

new Proxy()를 통해서 프록시 객체를 만들었다. 프록시란 값을 넣어 모방하는 객체라고 볼 수 있다. 가짜 객체와도 비슷한데 여기에서는 값을 사용할 때에 추가적인 동작을 할 수 있게 만들었다.

 

    var data = {
        a: 10
    }

    var app = new Proxy(data,{
        get() {
            console.log('값 접근');
        }
   })
        
        
  // 이 상태에서 브라우저 콘솔 창에
  // app.a 를 칠 경우
  // 값 접근
  // 이 표시가 된다. 따라서 proxy 안의 data.a가 아닌 값에 접근할 때에 가로채서 새로운 동작을 하게 한다.
get() {
   console.log('값 접근');
}
        
 이 부분이 값을 꺼내는 것에 새로운 동작을 하게 만든다.

 

<script>
    var data = {
        a: 10
    }

    var app = new Proxy(data,{
        get() {
            console.log('값 접근');
        },
        set() {
            console.log('값 갱신');
        }
    })
</script>


//비슷하게 app.a = 20 을 사용할 경우
// 값 갱신이 표시된다.
// set 하는 동작에 새로운 동작을 만들어준다.

위를 미루어 보았을 때, vue가 사용되는 방식을 짐작할 수 있게 된다.

1) {{data.a}} 를 뿌리기 전에, proxy 안에서 get()이 동작 할 것 get() 안에서는 data.a의 값을 표출 하게 끔 로직이 있을 것이다.

2) 어디선가 값의 변경을 할 경우 set() 안에서 값을 연결하여 값 변경이 있어 날 것으로 보인다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Proxy - JavaScript | MDN

 

 

mdn 문서의 정의에 따르면 기본 작업을 가로채고 재정이 하는 것이 프록시이다.

 

* 우리가 쓰는 document.querySelector() 같은 문법, 즉 html의 선택자에 접근하는 기술을 dom Api라고 함

 

 

proxy set()의 매개변수를 확인 할 수 있다. 

 

<div id="app">

</div>

<script>
    var data = {
        message: 10
    }

    function render(sth) {
        var div = document.querySelector('#app');
        div.innerHTML = sth;
    }

    var app = new Proxy(data,{
        get() {
            console.log('값 접근');
        },
        set(target, prop, value) {
            target[prop] = value;
            console.log(value);
            render(value);
        }
    })
</script>

 

내가 저 set() 함수를 사용하기 위해

콘솔을 통해 app.message = 20으로 변경한다면 내부에서는 어떤일이 일어날까

set(target : data , prop : message, value : 20) 의 형태가 되어 결국 data.message = 20의 값으로 변경되게 된다.

 

render를 통해 값이 화면에 꼿히게도 만들었다. 이게 vue가 지향하는 reactivity이다.

https://v2.vuejs.org/v2/guide/reactivity.html#ad

Reactivity in Depth — Vue.js

이 모양이 코드로 설명한 것의 이미지로 나와있다.

watcher부분은 이해되지 않기는 함

 

data부분이 proxy로 만든 부분이다.

 

Reactivity 차이점 - Vue 2 & Vue 3

차이점을 사실 모르겠다. 

 

vue3에서는 결국

https://ko.vuejs.org/guide/extras/reactivity-in-depth

Vue.js

위의 proxy를 사용한 것과 비슷하게 값의 변경이 생길 경우 effect( 함수 실행) 이 발생하는데 그것으로 새로 값을 바꿔주는 역할을 하는 것이다 예를들어

 

var a1 = 1
var a2 = 2
var a3 = a1 + a2 

console.log(a3) // 3

a2 = 3

console.log(a3) // 3

 

이렇게 a2 값이 변경된다고 해도 a3의 값은 변경 되지 않는다. 이것을 track과 trigger를 이용해서 사용하는데 그게 ref 함수안에 들어 있는 구조이다. 즉 값이 바뀔 때 모든 값의 결과도 함께 바뀌게 된다.

 

import { ref, watchEffect } from 'vue'

const A0 = ref(0)
const A1 = ref(1)
const A2 = ref()

watchEffect(() => {
  // A0과 A1을 추적함
  A2.value = A0.value + A1.value
})

// 이펙트가 트리거됨
A0.value = 2

 

이런식의 함수를 사용하게 된다. 혹은 

 

import { ref, computed } from 'vue'

const A0 = ref(0)
const A1 = ref(1)
const A2 = computed(() => A0.value + A1.value)

A0.value = 2

 

이런식의 함수가 가능하다.

내부적으로 computed는 무효화 및 재계산을 반응 이펙트를 사용하여 관리한다.

 

 

 

느끼는 점은 이러한 vue의 설명은 좋지만, 실무에서는 과연 어떤 함수를 사용하는게 정형화 되어있는지가 중요할 것 같다.