JavaScript Proxy API: 객체 동작 제어와 활용 사례

개요

JavaScript의 Proxy API는 객체의 기본 동작을 가로채고 조작할 수 있는 강력한 도구입니다. 이를 통해 객체의 속성 접근, 수정, 삭제 등의 동작을 제어하고 특정 로직을 추가할 수 있습니다. Proxy API는 고급 JavaScript 애플리케이션 개발에 유용하게 활용될 수 있습니다. 이 글에서는 Proxy API의 기본 개념, 주요 핸들러 메소드, 그리고 다양한 활용 사례를 살펴보겠습니다.

기본 개념

Proxy는 두 개의 인자를 받아 생성됩니다: 타겟 객체와 핸들러 객체입니다. 핸들러 객체에는 객체의 특정 작업을 가로채기 위한 트랩(trap) 메소드가 포함됩니다. 트랩 메소드는 함수로 정의되며, 타겟 객체에 수행될 연산이 이들 트랩 함수로 전달됩니다.

javascript
const target = {};
const handler = {};
const proxy = new Proxy(target, handler);

위 예제에서는 아직 트랩 메소드가 정의되지 않았으므로 Proxy 객체는 타겟 객체와 동일하게 동작합니다. 이제 몇 가지 트랩 메소드를 추가하여 Proxy의 기능을 살펴보겠습니다.

주요 핸들러 메소드

get

get 트랩은 객체의 속성이 읽힐 때 호출됩니다. 이를 통해 속성 접근을 가로채고 특정 로직을 추가할 수 있습니다.

javascript
const handler = {
  get: (target, property, receiver) => {
    console.log(`Property '${property}' has been read`);
    return target[property];
  }
};

const obj = { a: 10 };
const proxy = new Proxy(obj, handler);
console.log(proxy.a); // 콘솔에 'Property 'a' has been read'가 출력되고, 10이 반환됩니다.

set

set 트랩은 객체의 속성이 설정될 때 호출됩니다. 이를 통해 속성 값을 설정하는 동작을 제어할 수 있습니다.

javascript
const handler = {
  set: (target, property, value, receiver) => {
    console.log(`Setting value '${value}' to property '${property}'`);
    target[property] = value;
    return true; // 반환값은 설정 성공 여부를 나타냅니다.
  }
};

const obj = { a: 10 };
const proxy = new Proxy(obj, handler);
proxy.a = 20; // 콘솔에 'Setting value '20' to property 'a''가 출력됩니다.

deleteProperty

deleteProperty 트랩은 객체의 속성이 삭제될 때 호출됩니다.

javascript
const handler = {
  deleteProperty: (target, property) => {
    console.log(`Deleting property '${property}'`);
    delete target[property];
    return true; // 반환값은 삭제 성공 여부를 나타냅니다.
  }
};

const obj = { a: 10 };
const proxy = new Proxy(obj, handler);
delete proxy.a; // 콘솔에 'Deleting property 'a''가 출력됩니다.

활용 사례

데이터 검증

Proxy를 사용하면 객체의 속성 설정 시점에 데이터 검증 로직을 추가할 수 있습니다. 이는 잘못된 데이터 입력을 방지하는 데 유용합니다.

javascript
const handler = {
  set: (target, property, value) => {
    if (typeof value !== 'number') {
      throw new TypeError('Value must be a number');
    }
    target[property] = value;
    return true;
  }
};

const obj = {};
const proxy = new Proxy(obj, handler);

try {
  proxy.a = 'string'; // TypeError: Value must be a number
} catch (error) {
  console.error(error.message);
}

기본값 제공

Proxy를 사용하여 객체의 특정 속성이 존재하지 않을 경우 기본값을 제공할 수 있습니다.

javascript
const handler = {
  get: (target, property) => {
    return property in target ? target[property] : 'default';
  }
};

const obj = { a: 10 };
const proxy = new Proxy(obj, handler);
console.log(proxy.a); // 10
console.log(proxy.b); // 'default'

로그 기록

Proxy를 사용하여 객체의 속성 접근 및 변경을 로깅하는 기능을 구현할 수 있습니다.

javascript
const handler = {
  get: (target, property) => {
    console.log(`Accessing property '${property}'`);
    return target[property];
  },
  set: (target, property, value) => {
    console.log(`Setting property '${property}' to '${value}'`);
    target[property] = value;
    return true;
  }
};

const obj = { a: 10 };
const proxy = new Proxy(obj, handler);
proxy.a = 20; // 'Setting property 'a' to '20'' 출력
console.log(proxy.a); // 'Accessing property 'a'' 출력, 20 반환

마무리

JavaScript Proxy API는 객체의 동작을 세밀하게 제어할 수 있는 강력한 도구입니다. 신중하게 사용하면 객체의 기본 동작을 원하지 않는 방식으로 변경할 수 있다는 점을 유념해야 합니다. 그러나 올바르게 사용하면 데이터 검증, 기본값 제공, 로그 기록 등 다양한 유용한 기능을 구현할 수 있습니다. Proxy API를 활용하여 더 나은 JavaScript 애플리케이션을 개발해 보시기 바랍니다.