JavaScript 프록시 첫 소개

최근에 저는 프록시 개체에 대한 첫 번째 프로덕션 사용 사례를 가졌습니다. 이에 대해 좀 더 자세히 설명하고 코드에서 어떻게 사용할 수 있는지 알려드리겠습니다.

프록시 개체는 개체를 복사하고 특정 기능에 덮어쓰기를 적용할 수 있는 방법입니다.

이것은 get 또는 set 와 같은 필수 객체 기능을 가로채는 좋은 방법입니다.

자바스크립트 프록시 객체

기본 개체 정의부터 시작하겠습니다.

const user = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
};

이제 이 개체를 프록시 처리해 보겠습니다.

const proxyUser = new Proxy(user, handler);

프록시 개체는 두 개의 인수를 사용합니다. 첫 번째는 원래 개체이고 두 번째는 핸들러입니다. 처리기는 가로채거나 수정할 작업을 정의합니다.
get 함수를 수정하고 싶다고 가정해 보겠습니다.

const handler = {
  get(target, prop) {
    console.log('get called', target, prop);
    return target[prop].toUpperCase();
  },
};

위의 예에서 호출되는 항목을 기록하고 항상 대문자 변형을 반환하도록 get을 수정합니다.

이제 그 사람의 이름을 알아봅시다.

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS BONGERS

꽤 깔끔한!

받은 변수를 빠르게 자세히 살펴보겠습니다.
대상은 전체 개체를 보유하고 소품에는 변경되는 개체가 있습니다.

특정 속성에 대해서만 작업을 수행할 수도 있습니다.

const handler = {
  get(target, prop) {
    if (prop === 'firstName') {
      return target[prop].toUpperCase();
    }
    return target[prop];
  },
};

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);

// Returns: CHRIS Bongers

이 경우 firstName 속성만 대문자로 반환됩니다.

핸들러 유형

get 핸들러가 사용되는 것을 보았지만 활용할 수 있는 더 많은 핸들러가 있습니다.

이러한 처리기는 대상 개체에 대한 호출을 트랩하므로 종종 트랩이라고 합니다.

다음은 덮어쓸 수 있는 트랩 목록입니다.

apply

construct

deleteProperty

defineProperty

enumerate

get

getPrototypeOf

getOwnPropertyDescriptor

has

isExtensible

ownKeys

preventExtensions

set

setPrototypeOf

각 처리기는 자체 속성 집합과 함께 제공됩니다. MDN에서 전체 목록을 찾을 수 있습니다.

MDN trap list

이 CodePen에서 준비한 샘플을 사용해 볼 수도 있습니다.

결론

프록시 개체를 사용하여 특정 개체 작업을 덮어쓰거나 포착할 수 있습니다.

프록시를 사용하면 일반적으로 액세스할 수 없는 일부 핸들러를 활용할 수 있습니다. 그런 다음 이러한 핸들러를 개체의 속성 전체 또는 일부에 적용할 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나