Reactivity 동작 원리 구현..

참고 자료
Proxy

Reactivity System이란?

객체의 내용이 변함에 따라서 자연스럽게 화면의 내용이 일치하게 바뀌는 시스템을 Reactivity System이라고 한다.

Vue3에서는 Proxy라고 하는 API를 이용해 화면을 변경하고 있다.

Vue2 와 Vue3의 리액티비티 차이점

Vue2와는 다른점은 Object.defineProperty의 한계점을 극복 했다는 것이다.

사용법은 Proxy와 비슷하지만 a만 존재하는 객체에 b의 동작을 정의하고 싶다면, b에 대한 내용 Object.defineProperty에 다시한번 선언해 주어야 하는 즉, Object.defineProperty API를 돌려야 하기 때문에 한계점이 보인다.

하지만 Proxy는 객체를 통으로 모방을 하기 때문에 객체에 어떠한 속성이 들어와도 전부 다 동일한 Proxy의 동작으로 엮어 낼 수 있다.

따라서 Proxy를 통해 객체의 동작을 정의 할 수가 있는데,
Vue3의 리액티비티 동작 원리를 구현하기 위해 Proxy를 사용해서 간단한 리액티비티 시스템을 구현해 보았다.

간단하게 Proxy란?

Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다.

Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들지만, 이 객체의 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재정의할 수 있습니다. 프록시 객체는 일반적으로 속성 액세스를 기록하고, 입력의 유효성을 검사하고, 형식을 지정하거나, 삭제하는 데 사용됩니다.

코드

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app"></div>

<script>
    const data = {
        message: 10,
    };

    function render(something) {
        const div = document.querySelector("#app");
        div.innerHTML = something;
    }

    const app = new Proxy(data, {
        get() {
            console.log("값 접근");
        },
        set(target, property, newValue) {
            console.log("값 갱신");
            render(newValue);
            target[property] = newValue;
        },
    });
</script>

콘솔