JavaScript Proxy 사용방법

1. JavaScript Proxy란 무엇인가?

JavaScript Proxy는 다른 객체(target)를 감싸고 target 객체의 기본적인 동작을 가로채는 객체입니다.

 

기본 작업은 속성 조회, 할당, 열거 및 함수 호출 등이 될 수 있습니다.

 

2. proxy object 생성

새 프록시 개체를 만들려면 다음 구문을 사용합니다.

let proxy = new Proxy(target, handler);

이 구문에서:

• target – 래핑할 객체입니다.
• handler – 대상의 동작을 제어하는 메서드가 포함된 개체입니다. 핸들러 객체 내부의 메소드를 트랩이라고 합니다.

3. simple proxy 사용방법

먼저 user라는 객체를 정의합니다.

const user = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'john.doe@example.com',
}

두 번째로 핸들러 객체를 정의합니다.

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

셋째, 프록시 객체를 생성합니다.

const proxyUser = new Proxy(user, handler);

proxyUser 개체는 사용자 개체를 사용하여 데이터를 저장합니다. proxyUser는 사용자 개체의 모든 속성에 액세스할 수 있습니다.

넷째, proxyUser 개체를 통해 사용자 개체의 firstName 및 lastName 속성에 액세스합니다.

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

Output:

Property firstName has been read.
John
Property lastName has been read.
Doe

proxyUser 개체를 통해 사용자 개체의 속성에 액세스하면 핸들러 개체의 get() 메서드가 호출됩니다.

 

다섯째, 원래 객체 사용자를 수정하면 변경 사항이 proxyUser에 반영됩니다.

user.firstName = 'Jane';
console.log(proxyUser.firstName);

Output:

Property firstName has been read.
Jane

마찬가지로 proxyUser 객체의 변경 사항은 원래 객체(사용자)에 반영됩니다.

proxyUser.lastName = 'William';
console.log(user.lastName);

Output:

William

 

4. Proxy Traps

1) The get() trap

get() 트랩은 프록시 개체를 통해 대상 개체의 속성에 액세스할 때 시작됩니다.

 

앞의 예에서는 proxyUser 객체가 user 객체의 속성에 접근할 때 메시지가 출력됩니다.

 

일반적으로 속성에 액세스할 때 get() 트랩에서 사용자 지정 논리를 개발할 수 있습니다.

 

예를 들어, get() 트랩을 사용하여 대상 객체의 계산된 속성을 정의할 수 있습니다. 계산된 속성은 기존 속성의 값을 기반으로 값이 계산되는 속성입니다.

 

사용자 객체에는 fullName 속성이 없습니다. get() 트랩을 사용하여 firstName 및 lastName 속성을 기반으로 fullName 속성을 생성할 수 있습니다.

const user = {
    firstName: 'John',
    lastName: 'Doe'
}

const handler = {
    get(target, property) {
        return property === 'fullName' ?
            `${target.firstName} ${target.lastName}` :
            target[property];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);

Output:

John Doe

 

2) The set() trap

set() 트랩은 대상 객체의 속성이 설정될 때 동작을 제어합니다.

 

사용자의 연령이 18세 이상이어야 한다고 가정합니다. 이 제약 조건을 적용하려면 다음과 같이 set() 트랩을 개발합니다.

const user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age must be a number.');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older.')
            }
        }
        target[property] = value;
    }
};

const proxyUser = new Proxy(user, handler);

 

먼저 사용자의 나이를 문자열로 설정합니다.

proxyUser.age = 'foo';

Output:

Error: Age must be a number.

 

둘째, 사용자의 나이를 16세로 설정합니다.

proxyUser.age = '16';

Output:

The user must be 18 or older.

 

셋째, 사용자의 나이를 21세로 설정합니다.

proxyUser.age = 21;

오류가 발생하지 않았습니다.

 

3) The apply() trap

handler.apply() 메서드는 함수 호출에 대한 트랩입니다. 구문은 다음과 같습니다.

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});

다음 예를 참조하십시오.

const user = {
    firstName: 'John',
    lastName: 'Doe'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}


const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); //

Output:

JOHN DOE

 

4) More traps

다음은 더 많은 트랩입니다.

• construct – new 연산자의 사용을 트랩합니다.
• getPrototypeOf – [[GetPrototypeOf]]에 대한 내부 호출을 트랩합니다.
• setPrototypeOf – Object.setPrototypeOf에 대한 호출을 트랩합니다.
• isExtensible - Object.isExtensible에 대한 호출을 트랩합니다.
• preventExtensions – Object.preventExtensions에 대한 호출을 트랩합니다.
• getOwnPropertyDescriptor – Object.getOwnPropertyDescriptor에 대한 호출을 트랩합니다.

 

이 자습서에서는 다른 개체를 래핑하여 해당 개체의 기본 동작을 변경하는 데 사용되는 JavaScript 프록시 개체에 대해 배웠습니다.

 

 

 

Referance: https://www.javascripttutorial.net/es6/javascript-proxy/