글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

Vue.js에서 Reactive로 반응성을 주입한 데이터를 콘솔로 찍어보면 아래처럼 Proxy { ... } 형태로 출력한다. Proxy를 사용해서 입력한 데이터(상태)를 한 번 감싼 것이다. 이렇게 Proxy를 이용하면 객체 프로퍼티의 읽기 / 쓰기 같은 작업을 중간에 가로채서 원하는 작업을 수행하도록 할 수 있다.

사용 방법

const proxy = new Proxy(target, handler);

• target : Proxy로 감쌀 원본 객체. 함수를 포함한 모든 객체 가능
• handler : get이나 set 같은 동작을 가로채는 메서드(트랩; trap)이 담긴 객체.

객체를 proxy로 감싼 후, handler에 상응하는 트랩(메서드)가 있으면 트랩이 실행된다. 트랩이 없으면 target에서 작업이 수행된다. 아래 예시에선 트랩(handler)이 비어있기 때문에 proxy에 대한 모든 작업이 target으로 전달된다.

const user = { name: 'johan', age: 30 };
const proxy = new Proxy(user, {});
 
console.log(proxy); // Proxy {name: 'johan', age: 30}
proxy.test = 30; // 프로퍼티 추가
for (const key in proxy) console.log(key); // name, age, test

⭐️ 내부 메서드 대응 트랩

객체에 어떤 작업을 할 때 자바스크립트 명세에 정의된 내부 매서드(Internal Method)가 관여한다. 예를들어 프로퍼티를 읽을 땐 [[Get]], 프로퍼티를 쓸 땐 [[Set]] 이라는 내부 메서드가 관여한다. 내부 메서드는 개발자가 호출할 수 없다. Proxy의 트랩은 이런 내부 메서드의 호출을 가로채며, 모든 내부 메서드엔 대응하는 트랩이 있다.

Proxy 규칙

• 값 쓰는 작업 성공 시 [[Set]] 메서드는 반드시 true 반환. 실패 시 false 반환
• 값 삭제 작업 성공 시 [[Delete]] 메서드는 반드시 true 반환. 실패 시 false 반환
• 프락시 객체를 대상으로 [[GetPrototypeOf]] 메서드가 적용되면 프락시 타깃 객체에 [[GetPrototypeOf]] 를 적용한 것과 동일한 값 반환

트랩

조회 — Get

💡 get 메서드(트랩)는 프로퍼티를 조회할 때 작동한다.

get(target, property, receiver)

• target : 원본 객체. new Proxy() 첫번째 인자와 동일
• property : 프로퍼티 이름
• receiver : 최초 작업 요청을 받은 객체
  보통은 proxy 객체 자체가 receiver가 되며, Proxy 객체를 상속받은 객체가 있다면 해당 객체가 receiver가 된다. 타겟 프로퍼티가 getter라면 getter를 호출한 시점의 this를 가리킨다. 주로 프로토타입 체이닝에서 최초로 작업 요청을 받은 객체를 확인할 때 사용한다.

아래는 get 트랩을 이용해 프로퍼티의 기본값을 설정한 예시(존재하지 않는 프로퍼티를 조회할 때 기본값 반환).

// 예시 1
let numbers = [0, 1, 2];
numbers = new Proxy(numbers, {
  get(target, prop) {
    // 여기서 프로퍼티는 0, 1, 2 인덱스
    if (prop in target) return target[prop];
    // hasOwnProperty를 사용할 수도 있다 ex) *if (target.hasOwnProperty(prop)) {...}*
    // Reflect를 사용할 수도 있다(추천) *ex) if (Reflect.has(target, prop)) {...}*
    return 0; // 기본값
  },
});
 
numbers[1]; // 1
numbers[8]; // 0 (8번 인덱스에 해당하는 요소가 없으므로 0 반환)

// 예시 2
let dictionary = { Hello: '안녕하세요', Bye: '안녕히가세요' };
dictionary = new Proxy(dictionary, {
  get(target, phrase) {
    // 프로퍼티 읽기를 가로챔
    if (phrase in target) return target[phrase];
    // 구절이 있으면 번역문 반환
    return phrase; // 구절이 없으면 구절 그대로 반환
  },
});
 
dictionary['Hello']; // '안녕하세요'
dictionary['Good Night']; // 'Good Night' (해당하는 구절이 없으므로 구절 그대로 반환)

💡 Target 객체를 Proxy로 감싼 후부턴 반드시 Target 객체를 직접 참조하는 코드가 없어야 한다.

참고로 in 연산자는 명시한 속성이 객체에 존재하는지 여부를 boolean 값으로 반환한다.

const arr = [1, 2, 3, 4, 5];
0 in arr; // true (0번 index가 존재하므로)
5 in arr; // false (5번 index가 존재하지 않으므로)
'length' in arr; // true (배열은 length 프로퍼티를 가지므로)
'concat' in arr; // true
 
const obj = { name: 'Smith', age: 30 };
'name' in obj; // true
'city' in obj; // false

객체에 특정 프로퍼티가 있는지 확인하는 hasOwnProperty 를 사용하면 no-prototype-builtins ESLint 경고가 발생한다. 확인하려는 객체에 hasOwnProperty와 동일한 이름의 프로퍼티가 있을 수도 있기 때문이다. call 메서드로 this를 바인딩해서 호출하면 ESLint 경고를 피할 수 있지만 코드가 너무 길어진다.

Object.prototype.hasOwnProperty.call(target, prop); // true | false

hasOwnProperty 대신 Reflect 객체가 제공하는 has 메서드를 사용하면 더 깔끔하게 작성할 수 있다(참고).

Reflect.has(target, prop) // true | false

쓰기 — Set

💡 set 메서드(트랩)는 프로퍼티를 쓸 때(write) 작동한다.

set(target, property, value, receiver)

• target : 원본 객체. new Proxy() 첫번째 인자와 동일
• property : 프로퍼티 이름
• value : 프로퍼티 값
• receiver : get 트랩과 유사하게 동작하는 객체. setter 프로퍼티에만 관여함

set을 이용해 숫자만 저장할 수 있는 배열을 만든다고 가정하고, 만약 숫자가 아닌 다른 타입을 추가하려고 하면 에러를 발생하도록 할 수 있다. value가 숫자일때만 true를 반환하고, 숫자 타입이 아닐땐 false를 반환하도록 하면 된다.

💡 set 트랩을 사용할 때 항상 true false를 반환해야 하는 점 잊지 말것.

let numbers = [];
 
numbers = new Proxy(numbers, {
  set(target, prop, value) {
    if (typeof value === 'number') {
      target[prop] = value;
      return true;
    }
    return false;
  },
});
 
numbers.push(1); // value가 넘버 타입이므로 추가 성공
numbers.push('2'); // Error! value가 문자형이므로 추가 실패
numbers.length; // 1

Proxy로 배열(객체)를 감싸도 push나 length 같은 프로퍼티를 계속 사용할 수 있다. push나 unshift 같은 배열 메서드는 [[Set]]을 사용하기 때문에 메서드를 덮어쓰지 않고도 Proxy가 동작을 가로챈 후 값을 검증할 수 있는 것.

반복 — ownKeys, getOwnPropertyDescriptor

Object.keys for...in 같은 순환 메서드 대부분은 내부 메서드 [[OwnPropertyKeys]](트랩 메서드 ownKeys)를 사용해서 프로퍼티 목록을 얻는다. 이 순환 메서드의 세부 동작엔 아래와 같은 차이가 있다.

아래는 ownKeys 트랩을 이용해 _로 시작하는 프로퍼티를 for...in 순환 대상에서 제외하도록 한 예시. Object.key/values에도 동일한 로직이 적용된다. (_로 시작하는 프로퍼티는 순회 대상에서 제외한다)

let user = {
  name: 'Johan',
  age: 30,
  _password: '1q2w3e4r',
};
 
user = new Proxy(user, {
  ownKeys(target) {
    // _로 시작하는 key는 건너뛰도록 하는 트랩
    return Object.keys(target).filter((key) => !key.startsWith('_'));
  },
});
 
for (const key in user) console.log(key); // name, age
Object.keys(user); // ['name', 'age']
Object.values(user); // ['John', 30]

아래 코드는 의도한대로 작동하지 않는다. Object.keys는 내부 메서드인 [[GetOwnProperty]]를 호출해 모든 프로퍼티의 설명자를 확인한 후 enumerable 플래그가 있는 프로퍼티만 반환한다. 아래에서 user는 프로퍼티 설명자도 없고 enumerable 플래그도 없으므로 순환 대상에서 제외된 것.

let user = {};
 
user = new Proxy(user, {
  ownKeys(target) {
    return ['a', 'b', 'c'];
  },
});
 
Object.keys(user); // ['a', 'b', 'c']를 예상했지만 [] 빈 배열만 나옴

Object.keys 호출 시 의도한대로 프로퍼티를 반환하도록 하려면 enumerable 플래그를 추가하거나, 내부 메서드인 [[GetOwnProperty]]가 호출될 때 이를 가로채서 설명자 enumerable: true를 반환하도록 하면 된다. getOwnPropertyDescriptor 트랩은 이때 사용된다.

let user = {};
 
user = new Proxy(user, {
  ownKeys(target) {
    // 프로퍼티 리스트를 얻을 때 1번 호출됨
    return ['a', 'b', 'c'];
  },
  getOwnPropertyDescriptor(target, prop) {
    // 모든 프로퍼티를 대상으로 한번씩 호출됨
    return {
      enumerable: true,
      configurable: true,
    };
  },
});
 
Object.keys(user); // ['a', 'b', 'c']

💡 객체에 프로퍼티가 없을 때 [[GetOwnProperty]]를 가로채서 위 예시처럼 사용할 수 있는점 기억.

프로퍼티 보호 — deleteProperty

일반적으로 내부에서만 사용하는 프로퍼티 / 메서드는 이름 앞에 _(언더스코어; 밑줄)를 붙이는 컨벤션이 있다. 원칙적으론 _ 밑줄이 붙으면 객체 외부에선 이 프로퍼티에 접근할 수 없어야 한다. 하지만 대부분 아래처럼 접근할 수 있다.

const user = {
  name: 'Johan',
  _password: '1q2w3e4r',
};
 
console.log(user._password); // 1q2w3e4r

Proxy를 이용해 _로 시작하는 내부 프로퍼티를 외부에서 접근하지 못하도록 할 수 있다. 이 기능을 구현하려면 아래 트랩이 필요하다.

// 코드 참고 JavaScript Info
let user = {
  name: 'John',
  checkPassword(value) {
    // checkPassword(비밀번호 확인)는 _password를 읽을 수 있어야 한다
    return value === this._password;
  },
  _password: '***',
};
 
user = new Proxy(user, {
  get(target, prop) {
    // 프로퍼티 읽기를 가로챔
    if (prop.startsWith('_')) {
      throw new Error('접근이 제한되어있습니다.');
    }
    const value = target[prop];
    return typeof value === 'function' ? value.bind(target) : value; // (*)
  },
  set(target, prop, value) {
    // 프로퍼티 쓰기를 가로챔
    if (prop.startsWith('_')) {
      throw new Error('접근이 제한되어있습니다.');
    } else {
      target[prop] = value;
      return true;
    }
  },
  deleteProperty(target, prop) {
    // 프로퍼티 삭제를 가로챔
    if (prop.startsWith('_')) {
      throw new Error('접근이 제한되어있습니다.');
    } else {
      delete target[prop];
      return true;
    }
  },
  ownKeys(target) {
    // 프로퍼티 순회를 가로챔
    return Object.keys(target).filter((key) => !key.startsWith('_'));
  },
});
 
user._password; // [Get] Error
user._password = '1q2w3e4r'; // [Set] Error
delete user._password; // [Delete] Error
for (const key in user) console.log(key); // [OwnPropertyKeys] name

💡 bind 메서드는 첫번째 인자에 명시한 this 컨텍스트를 담은 바인딩된 함수를 리턴한다.

get 트랩에서 아래처럼 value가 함수일 때 value.bind(target) 바인딩된 함수를 리턴하고 있다. 비밀번호를 확인하는 user.checkPassword() 메서드가 _password 값에 접근 하도록 하기 위해서다.

get(target, prop) {
  // ...
  let value = target[prop];
  return (typeof value === 'function') ? value.bind(target) : value; // (*)
}

user.checkPassword()를 호출하면 this는 프록시로 감싼 user가 되는데(.온점 앞이 user이므로), this._password는 get 트랩을 활성화하므로 에러가 발생한다. 이런 이유 때문에 원본 객체(target) 컨텍스트를 바인딩 시킨 것. 그럼 checkPassword()를 호출할 때 this는 트랩이 없는 원본 객체(target)가 되고, _password에 접근할 수 있게된다.

위 방법은 대부분 잘 작동하지만, 메서드가 Proxy로 감싸지 않은 객체를 넘기는 순간 엉망진창이 될 수 있기 때문에 이상적인 방법은 아니다. 기존 객체와 Proxy로 감싼 객체가 어디 있는지 파악할 수 없기 때문이다.

💡 클래스에서 #을 붙이면 private 프로퍼티 / 메서드로 사용할 수 있다(private은 상속 불가).

범위 확인 — has

💡 has 메서드(트랩)는 in 연산자를 사용할 때 작동한다 — in 호출을 가로챈다.

has(target, property)

• target : 원본 객체. new Proxy() 첫번째 인자와 동일
• property : 프로퍼티 이름

아래는 in 연산자를 사용해 특정 숫자가 range 내에 있는지 확인하는 예시. in 연산자를 사용할 때 has 트랩이 이를 가로채고, 입력받은 prop이 start와 end 프로퍼티 사이에 있는 숫자인지 확인한다.

let range = {
  start: 1,
  end: 10,
};
 
range = new Proxy(range, {
  has(target, prop) {
    return prop >= target.start && prop <= target.end;
  },
});
 
console.log(5 in range); // true (이때 prop은 5)
console.log(11 in range); // false (이때 prop은 11)

래퍼 함수 — apply

💡 apply 메서드(트랩)은 함수를 호출할 때 작동한다.

apply(target, thisArg, args)

• target : 원본 객체 (JS에선 함수 역시 객체다)
• thisArg : this의 값
• args : 파라미터 목록 (arguments)

let func = function () {
  return 'I am target';
};
func = new Proxy(func, {
  apply(target, thisArg, args) {
    return 'I am proxy';
  },
});
 
func(); // 'I am proxy' (이때 args는 [])
func(2, 3); // 이때 args [2, 3]

데코레이터(Decorator)는 하나의 코드를 다른 코드로 래핑하거나, 다른 함수를 래핑하는 방법이다. 아래 코드에서 delay(f, ms)를 호출하면 함수가 반환되고, 이 함수는 ms 밀리초 후에 실행된다.

function delay(f, ms) {
  // 일정 시간이 후 f를 호출하는 Wrapper 함수 반환
  return function (...args) {
    setTimeout(() => f.apply(this, args), ms);
  };
}
 
let sayHi = function (user) {
  console.log(`Hello, ${user}!`);
};
 
sayHi = delay(sayHi, 3000); // ƒ (...args) { setTimeout(...) }
sayHi('Johan'); // (3초 후) Hello, Johan!

하지만 래퍼 함수는 읽기 / 쓰기 등의 연산은 전달하지 못한다. 래퍼 함수로 한 번 감싸고 나서부턴 기존 함수에 있던 name length 같은 프로퍼티 정보는 사라진다.

//...
console.log(sayHi.length); // 1 (함수 정의부에 명시한 파라미터의 갯수)
sayHi = delay(sayHi, 3000);
console.log(sayHi.length); // 0 (래퍼 함수 정의부엔 파라미터가 없음)

Proxy를 이용하면 타겟 객체(원본 함수)에 모든걸 전달해주므로 더 강력하다. 원본 함수에 있던 name length 같은 프로퍼티도 제대로 된 결과를 반환한다.

function delay(f, ms) {
  return new Proxy(f, {
    apply(target, thisArg, args) {
      setTimeout(() => target.apply(thisArg, args), ms);
    },
  });
}
 
// let sayHi = function() {...}  생략
 
sayHi = delay(sayHi, 3000);
console.log(sayHi.length); // 1 (프락시에 수행되는 모든 연산이 원본 함수에 전달된다)
sayHi('Johan'); // (3초 후) Hello, Johan!

Observable 만들기 예제

💡 Symbol은 변경 불가능한 원시 타입이다. 호출할 때마다 고유한 Symbol 값을 생성한다. Symbol() 인자에 넘긴 문자열은 Symbol 생성에 아무런 영향도 주지 않는다(디버깅 용도로만 사용).

Proxy를 이용해 전달받은 객체를 관찰 가능하도록(observable) 만들 수 있다. 아래 예제는 객체 프로퍼티 값을 변경할 때마다 observe 메서드에 넘긴 콜백을 실행해서 프로퍼티 key value(변경후)를 출력한다.

1. user 객체에 observe 함수 등록 → obj[handlers] 배열에 함수 저장
2. user.name 값 쓰기 시도
3. set 트랩 실행 후 name 프로퍼티 값 변경
4. obj[handlers] 배열에 저장한 콜백 실행

// 코드 참고 JavaScript Info
const handlers = Symbol('handlers');
 
function makeObservable(obj) {
  obj[handlers] = []; // observe 메서드가 받은 handler 함수를 저장할 배열
  obj.observe = (handler) => {
    // 전달 받은 handler 인자 타입이 함수일때만 obj[handlers] 배열에 저장
    if (typeof handler === 'function') obj[handlers].push(handler);
  };
 
  return new Proxy(obj, {
    // 프로퍼티 값 읽기(get 트랩)도 아래(set 트랩)와 비슷한 방법으로 작성할 수 있다
    set(target, prop, value, receiver) {
      const success = Reflect.set(target, prop, value, receiver); // 타겟 객체에 동작 전달
      if (success) target[handlers].forEach((handler) => handler(prop, value));
      return success; // 프로퍼티 쓰기 성공시 true, 실패시 false
    },
  });
}
 
const user = makeObservable({});
 
user.observe((key, value) => console.log(`SET ${key} = ${value}`));
user.name = 'Johan'; // SET name = Johan
user.name = 'Smith'; // SET name = Smith

💡 옵서버 패턴과 관련한 더 자세한 내용과 다른 예제는 링크 참고.

Reflect

💡 메타 프로그래밍은 프로그램 실행 중에 자신 혹은 다른 프로그램을 조작하는 기법을 가리킨다. 자신의 코드를 읽고, 변경하거나, 새로운 코드를 생성하는 등의 다양한 동작을 포함한다. 자바스크립트에선 객체의 동작을 가로채서 새로운 기능을 추가할 수 있는 Proxy와, 객체의 속성을 안전하게 읽고 쓰는 Reflect 메서드를 통해서 메타 프로그래밍을 지원한다.

Reflect는 자바스크립트의 메타 프로그래밍을 지원하는 내장 객체다. Reflect 메서드는 Proxy의 각 트랩 인터페이스와 동일하기 때문에(트랩 반환 요구사항 충족), Proxy 트랩 내에서 기본 동작을 더 손쉽게 구현할 수 있다.

Reflect.get(target, propertyKey[, receiver]) : Return target[property]
Reflect.set(target, propertyKey, value[, receiver]) : Return boolean
Reflect.has(target, propertyKey) : Return boolean
Reflect.deleteProperty(target, propertyKey) : Return boolean
Reflect.ownKeys(target) : Return array of property keys
…(더 많은 정적 메서드는 MDN 참고)

예를들어 Set 트랩에서 target[prop] = value 와 같은 쓰기 작업 후 일일이 true 혹은 false를 반환하는 대신, Reflect.set(target, prop, value) 한 줄로 간단하게 처리할 수 있다.

const userProxy = new Proxy(
  { name: 'John', age: 30 },
  {
    set(target, prop, value) {
      return Reflect.set(...arguments); // Reflect.set(target, prop, value)
      // target[prop] = value;
      // return true;
    },
  },
);

Reflect.get(...) 등의 메서드는 선택적으로 receiver 인자를 받는데, 이를 통해 this 바인딩을 설정할 수 있다. 특히, 객체의 프로토타입을 변경한 후 발생할 수 있는 사이드 이펙트 상황에서 최초 접근 요청을 받은 객체의 this 바인딩을 유지할 때 유용하다.

Receiver 개념

💡 target[property]가 getter/setter(접근자 프로퍼티)이면 Receiver가 this 컨텍스트로 동작한다.

JS에선 프로토타입 체이닝이 이뤄지더라도 최초 접근 요청을 받은 객체를 유지한다. 이 객체를 Receiver라고 부른다. target[property]가 getter/setter라면 Receiver가 this 컨텍스트로 동작한다.

아래 예제에서 child.age 프로퍼티 읽기를 시도하면 [[Get]] 내부 슬롯 메서드를 호출하고 이때 Receiver는 child 객체가 된다. — child.[[Get]](P, Receiver)

child 객체엔 age가 없으므로 프로토타입 체이닝을 통해 parent 객체의 age getter*를 실행한다. 이때 Receiver(child)가 this로 사용돼서 this._birthYear는 1990이 된다. *setter 역시 비슷한 과정을 거쳐 Receiver(child)가 this로 사용된다.

// 코드 참고 Toast UI
const child = {
  _birthYear: 1990,
};
 
const parent = {
  _birthYear: 1984,
  get age() {
    return new Date().getFullYear() - this._birthYear;
  },
  set birthYear(year) {
    this._birthYear = year;
  },
};
 
Object.setPrototypeOf(child, parent); // child.__proto__ = parent;
console.log(child.age); // 32 (2022 - 1990)

Reflect 활용

this 바인딩

Reflect의 receiver 파라미터는 getter/setter(접근자 프로퍼티)에서 this로 사용된다.

Reflect 객체를 사용하면 receiver 파라미터를 통해 this 바인딩을 조작할 수 있다. target과 receiver가 다르고, target[property]가 getter/setter이면 receiver 프로퍼티를 읽거나 쓴다. 즉, target의 getter/setter에서 this는 receiver가 된다.

const target = {
  one: 10,
  two: 20,
  get sum() {
    return this.one + this.two;
  },
};
 
const receiver = {
  one: 30,
  two: 40,
  get sum() {
    return this.one + this.two + 999;
  },
};
 
// target의 데이터 프로퍼티에 접근할 때 (target.one)
// target.one은 데이터 프로퍼티이므로 receiver 파라미터는 아무 역할도 하지 않는다
Reflect.get(target, 'one', target); // 10
Reflect.get(target, 'one', receiver); // 10
 
// target의 접근자 프로퍼티(getter/setter)에 접근할 때 (target.sum)
Reflect.get(target, 'sum', target); // 30 (sum getters this: target)
Reflect.get(target, 'sum', receiver); // 70 (sum getters this: receiver)

프로토타입 사이드 이팩트 해결

아래 예제에서 admin.name 값을 조회하면 Admin이 아닌 Guest를 반환한다.

admin 객체엔 name 프로퍼티가 없으므로 프로토타입 체이닝을 통해(via __proto__) userProxy 객체에서 name을 찾는다. 그럼 get 트랩이 트리거 되고 target[prop] 값을 반환하는데, target[prop]이 getter라면 target 컨텍스트에서 실행된다. 때문에 name getter 안에서 this는 user(target)가 된다.

// 프로토타입 사이드 이펙트 예시 via JavaScript Info
const user = {
  _name: 'Guest',
  get name() {
    return this._name;
  },
};
 
const userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    return target[prop]; // target === user
  },
});
 
const admin = {
  __proto__: userProxy,
  _name: 'Admin',
};
 
console.log(admin.name); // Guest

위 같은 상황에서 Reflect를 사용하면 getter에 올바른 컨텍스트를 전달할 수 있다. receiver는 최초 접근 요청을 받은 객체(admin)를 유지하므로 이를 Reflect.get에 넘기면 getter는 admin 컨텍스트에서 실행된다. 즉, name getter에서 this는 admin이 된다.

const userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    // return target[prop];
    return Reflect.get(target, prop, receiver);
  },
});

중첩 프록시

아래처럼 중첩 객체 형식으로 할당을 시도하면 1 뎁스에 있는 wrapper 객체는 Proxy를 통해 관리되지만, 그 내부에 있는 객체(아래 예시에서 a 속성)는 따로 Proxy로 관리되지 않는다.

const origin = {};
 
const handler = {
  get(target, prop, receiver) {
    console.log('Get 트랩 실행');
    return Reflect.get(...arguments);
  },
  set(target, prop, value) {
    console.log('Set 트랩 실행');
    return Reflect.set(...arguments);
  },
};
 
const wrapper = new Proxy(origin, handler);
wrapper.a = {};
wrapper.a.b = 20;
 
console.log(wrapper);
// Set 트랩 실행
// Get 트랩 실행
// Proxy(Object) {a: {b: 20}} -> wrapper는 Proxy 객체, wrapper.a는 일반 객체

1. wrapper.a = {} : Set 트랩이 실행돼서 a 속성에 {} 빈 객체를 할당한다.
2. wrapper.a.b = 20 :
   1. 먼저 wrapper.a 속성에 접근하기 위해 Get 트랩이 실행되고 {} 빈 객체를 반환한다.
   2. 반환된 객체의 b 속성을 20으로 직접 할당하기 때문에 Set 트랩은 실행되지 않는다.

만약 내부 객체도 모두 Proxy로 관리하고 싶다면 Get 트랩에서 반환하는 값이 객체 타입일 땐 해당 객체에도 동적으로 Proxy를 적용하는 방식으로 구현하면 된다. 조회하는 값이 객체라면 항상 새로운 Proxy를 생성하기 때문에 메모리 누수 방지를 위해 이미 생성한 Proxy는 캐시로 관리해서 재사용하는 로직도 필요하다.

const origin = {};
 
// WeakMap은 객체를 참조하는 곳이 없다면 가비지 컬렉션 대상이 돼서 메모리와 WeakMap에서 삭제된다
const proxyCache = new WeakMap();
 
const handler = {
  get(target, prop, receiver) {
    console.log('Get 트랩 실행');
    const value = Reflect.get(...arguments);
 
    if (typeof value === 'object' && value !== null) {
      if (proxyCache.has(value)) {
        return proxyCache.get(value); // 저장된 Proxy 캐시가 있다면 반환
      } else {
        const newProxy = new Proxy(value, handler); // 저장된 Proxy 캐시가 없어서 새로운 Proxy 객체 생성
        proxyCache.set(value, newProxy); // 새로 생성한 Proxy 객체를 캐시에 저장
        return newProxy;
      }
    }
 
    return value;
  },
  set(target, prop, value) {
    console.log('Set 트랩 실행');
    return Reflect.set(...arguments);
  },
};
 
const wrapper = new Proxy(origin, handler);
wrapper.a = {};
wrapper.a.b = 20;
 
console.log(wrapper);
// Set 트랩 실행
// Get 트랩 실행
// Set 트랩 실행
// Proxy(Object) {a: {b: 20}} -> wrapper, wrapper.a 모두 Proxy 객체

1. wrapper.a : Set 트랩이 실행돼서 a 속성에 {} 빈 객체를 할당한다.
2. wrapper.a.b = 20 :
   1. Get 트랩이 실행돼서 a 속성 값이 객체인지 확인한다. a 속성 값은 빈 객체이고 proxyCache에 존재하지 않기 때문에 새로운 Proxy 객체를 생성하고 proxyCache에 저장한 후 반환한다.
   2. 반환된 Proxy 객체의 b 속성에 접근하기 때문에 Set 트랩이 실행되고, b 속성에 20을 할당한다.

레퍼런스

• Proxy | Wangdoc
• Proxy와 Reflect | JavaScript Info
• JavaScript Proxy. 근데 이제 Reflect를 곁들인 | Toast
• hmos.dev