TS Decorator
2025-02-05
tsdecorator
데코레이터란?
데코레이터는 클래스나 메서드에 추가 기능을 붙이는 함수.
쉽게 말해, 기존 코드에 손대지 않고 기능을 확장할 수 있는 방법
기본 개념 (함수로 데코레이터 만들기)
데코레이터는 함수를 감싸서 실행을 변경하는 방식으로 동작합니다.
function Logger(target: any) {
console.log(`클래스 ${target.name}가 생성됨!`);
}
@Logger
class User {} // "클래스 User가 생성됨!" 출력됨
@Logger를 User 클래스에 붙이면, User가 정의될 때 Logger() 함수가 실행됩니다.
메서드 데코레이터
클래스 전체가 아니라, 특정 메서드만 감싸는 것도 가능합니다.
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
console.log(
`target:${JSON.stringify(target)}, key:${key}, ${JSON.stringify(
descriptor
)}`
);
descriptor.value = function (...args: any[]) {
console.log(`메서드 ${key} 실행됨!`);
return originalMethod.apply(this, args); // this가 달라질 수도 있기 때문에 처리
};
}
class User {
@Log
sayHello() {
console.log("Hello!");
}
}
const user = new User();
user.sayHello();
// 출력:
// target:{},
// key:sayHello,
// {"writable":true,"enumerable":false,"configurable":true}
// "메서드 sayHello 실행됨!"
// "Hello!"
target은 현재 인스턴스 객체의 클래스입니다.key는 데코레이터를 적용할 속성 이름입니다(문자열).descriptor는 해당 속성의 설명자 객체입니다.
@Log가sayHello()실행 전에console.log()를 추가하는 역할을 합니다.