고급 TypeScript - 데코레이터: 접근자 데코레이터
데코레이터: 접근자 데코레이터
접근자 데코레이터는 TypeScript에서 클래스의 접근자 메서드에 대한 추가적인 기능을 제공하는 방법입니다. 접근자는 클래스의 프로퍼티에 대해 getter와 setter를 정의할 수 있는 특별한 메서드로, 이들을 통해 데이터를 읽거나 쓸 수 있습니다. 접근자 데코레이터는 이러한 메서드가 호출될 때마다 특정 동작을 수행하도록 할 수 있습니다.
기본 개념
-
접근자의 역할:
- Getter: 프로퍼티 값을 반환합니다.
- Setter: 프로퍼티 값을 설정합니다.
-
데코레이터의 목적:
- 코드 재사용성을 높이고, 공통된 로직을 캡슐화하여 유지보수를 용이하게 합니다.
- 특정 로깅이나 검증과 같은 부가 기능을 쉽게 추가할 수 있게 해줍니다.
사용법
접근자 데코레이터는 다음과 같이 정의할 수 있습니다:
function LogAccessor(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalGetter = descriptor.get;
const originalSetter = descriptor.set;
// Getter 수정
descriptor.get = function() {
console.log(`Getting value of ${propertyKey}`);
return originalGetter ? originalGetter.call(this) : undefined;
};
// Setter 수정
descriptor.set = function(value: any) {
console.log(`Setting value of ${propertyKey} to ${value}`);
if (originalSetter) {
originalSetter.call(this, value);
}
};
}
class Person {
private _name: string;
constructor(name: string) {
this._name = name;
}
@LogAccessor
get name(): string {
return this._name;
}
@LogAccessor
set name(value: string) {
this._name = value;
}
}
// 사용 예시
const person = new Person("Alice");
console.log(person.name); // Getting value of name => Alice
person.name = "Bob"; // Setting value of name to Bob
console.log(person.name); // Getting value of name => Bob
예제 설명
LogAccessor
라는 이름의 데코레이터를 만들었습니다. 이 데코레이터는 getter와 setter가 호출될 때마다 로그 메시지를 출력합니다.Person
클래스에서는_name
이라는 프라이빗 변수를 가지고 있으며, 이 변수에 대한 접근자를 정의했습니다.@LogAccessor
를 통해 각 접근자가 호출될 때마다 로그가 출력되는 것을 확인할 수 있습니다.
활용 사례
-
디버깅:
- 데이터 흐름을 추적하고 문제를 해결하기 위해 유용합니다.
-
검증:
- 값이 설정되기 전에 특정 조건을 확인해야 하는 경우 사용할 수 있습니다.
-
상태 관리:
- 상태 변경 시 다른 작업(예를 들어 UI 업데이트)을 트리거하는데 도움이 됩니다.
-
로깅 및 모니터링:
- 시스템 동작이나 사용자 상호작용 기록 등을 남길 때 유용합니다.
접근자 데코레이터는 TypeScript에서 객체 지향적으로 코드를 작성하면서도 부가기능을 쉽게 통합할 수 있는 강력한 도구입니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.