고급 TypeScript - 데코레이터: 접근자 데코레이터

데코레이터: 접근자 데코레이터

접근자 데코레이터는 TypeScript에서 클래스의 접근자 메서드에 대한 추가적인 기능을 제공하는 방법입니다. 접근자는 클래스의 프로퍼티에 대해 getter와 setter를 정의할 수 있는 특별한 메서드로, 이들을 통해 데이터를 읽거나 쓸 수 있습니다. 접근자 데코레이터는 이러한 메서드가 호출될 때마다 특정 동작을 수행하도록 할 수 있습니다.

기본 개념

  1. 접근자의 역할:

    • Getter: 프로퍼티 값을 반환합니다.
    • Setter: 프로퍼티 값을 설정합니다.
  2. 데코레이터의 목적:

    • 코드 재사용성을 높이고, 공통된 로직을 캡슐화하여 유지보수를 용이하게 합니다.
    • 특정 로깅이나 검증과 같은 부가 기능을 쉽게 추가할 수 있게 해줍니다.

사용법

접근자 데코레이터는 다음과 같이 정의할 수 있습니다:

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에서 객체 지향적으로 코드를 작성하면서도 부가기능을 쉽게 통합할 수 있는 강력한 도구입니다. 이를 통해 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.

Subscribe to shimdh.log

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe