JavaScript Academy · 강의

get 및 set 트랩

속성을 읽고 쓰는 동작을 사용자 지정합니다.

get 및 set 트랩은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

get 및 set 트랩

get 및 set 트랩은 가장 자주 사용하는 프록시 후크입니다. 속성 읽기와 쓰기를 가로채 값을 변환하고 입력을 검증하거나 접근을 기록할 수 있게 합니다.

get 트랩 시그니처

get(target, property, receiver)는 모든 속성 읽기에서 실행됩니다. 호출자에게 보여 줄 값은 무엇이든 반환할 수 있습니다.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

get을 통한 기본값

get 트랩은 누락된 속성에 대해 undefined를 반환하는 대신 fallback을 제공할 수 있습니다.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

읽은 값 변환하기

get 트랩은 반환되는 값을 변형할 수 있습니다. 예를 들어 문자열을 대문자로 바꿀 수 있습니다.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

set 트랩 시그니처

set(target, property, value, receiver)는 모든 쓰기에서 실행됩니다. 성공하면 true를 반환해야 하며, 그렇지 않으면 엄격 모드에서 오류가 발생합니다.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

set에서 검증하기

set 트랩의 대표적인 용도는 검증입니다. 잘못된 값이 target에 도달하기 전에 거부할 수 있습니다.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

set에서 값 변환하기

set 트랩은 값을 거부하는 것뿐 아니라 입력을 정규화할 수도 있습니다. 예를 들어 저장하기 전에 문자열의 앞뒤 공백을 제거할 수 있습니다.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

두 연산 모두 로깅하기

get과 set을 결합해 모든 접근을 추적할 수 있습니다. 객체가 어떻게 사용되는지 디버깅할 때 매우 유용합니다.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

읽기 전용 적용하기

쓰기를 항상 거부하는 set 트랩을 사용하면 프록시가 target의 읽기 전용 뷰가 됩니다.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

심벌 키와 내부 동작

심벌 키에 대해서도 트랩이 실행됩니다. 내부 심벌을 포함한 모든 속성을 기록하면 로그가 지나치게 많아질 수 있으므로 필요할 때 필터링하십시오.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

get과 set이 중요한 이유

이 두 트랩을 함께 사용하면 target을 수정하지 않고도 검증, 계산된 속성, 기본값, 로깅, 반응성을 구현할 수 있습니다. 하지만 트랩 안에서 target[prop] = value를 직접 작성하면 예외적인 경우가 발생할 수 있습니다. 다음에 다룰 Reflect API는 이러한 경우를 올바르게 처리합니다.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

빠른 확인

성공적인 할당을 나타내려면 set 트랩이 무엇을 반환해야 합니까?

복습: get 및 set 트랩

핵심 프록시 트랩을 배웠습니다.

get(target, prop, receiver)는 읽기를 가로채며 어떤 값이든 반환할 수 있습니다.
set(target, prop, value, receiver)는 쓰기를 가로채며 성공하면 true를 반환합니다.
기본값, 변환, 검증, 로깅에 활용할 수 있습니다.
트랩 내부를 올바르게 처리하려면 다음에 다룰 Reflect를 사용하십시오.

자주 묻는 질문

“get 및 set 트랩” 강의는 무료인가요?

네 — “get 및 set 트랩” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“get 및 set 트랩”에서 뭘 배우나요?

속성을 읽고 쓰는 동작을 사용자 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“get 및 set 트랩” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기