[Optional] 구조분해는 왜 reactivity를 잃게 만들까?

심화 내용이므로 관심있는 분들만 읽으셔도 됩니다.

뷰3의 reactivity 시스템은 내부적으로 proxy를 사용합니다. 뷰2에서는 Object.defineProperty를 사용해 reactivity를 구현했었습니다.

뷰의 reactivity에 대해 좀 더 자세히 공부하고 싶으면 자바스크립트의 proxy와 구조분해할당에 대해 먼저 이해해야 합니다.

proxy는 값을 사용하거나 변경할때 handler에 작성한 로직이 같이 실행되기 때문에 reactivity를 구현하기 적합한 JS 스펙입니다.

구조분해를 하면 proxy 밖에서 값을 읽는 형태가 되기 때문에 Vue가 개별 변수들을 추적하지 못하게 됩니다.

proxy로 reactivity 객체 만들어보기

다음과 같이 javascript를 작성합니다. code sandbox를 사용하셔도 되고 Vite로 바닐라 자바스크립트 개발 환경을 만드셔도 됩니다.

let handler = {
  get(target, property, receiver) {
    console.log(`Accessed property: ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`Set property: ${property} to ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
};

let reactiveObject = new Proxy({ name: 'John', age: 30 }, handler);
window.reactiveObject = reactiveObject;

콘솔에서 age를 변경했을때 다음처럼 콘솔로그가 출력됩니다.

reactiveObject는 프로필과 핸들러가 인자로 들어갑니다. 이때 값이 변경될때는 Set propery: 가 콘솔에 출력되게 세터를 작성했습니다.

구조분해를 하면 게터가 호출됩니다.

그리고 더이상 proxy에 영향을 받지 않습니다. age값을 변경해도 세터가 호출되지 않습니다.