데코레이터 소개

TypeScript의 데코레이터는 메타데이터를 추가하거나 클래스, 메서드, 속성의 동작을 수정할 수 있게 해 주는 특수한 함수입니다.

개발을 간소화하기 위해 Angular와 같은 프레임워크에서 자주 사용됩니다.

데코레이터의 작동 방식

데코레이터는 클래스나 클래스의 구성원(메서드, 속성 등)에 적용되는 함수입니다.

예를 들어 Angular의 @Component는 클래스를 컴포넌트로 정의하기 위해 클래스에 메타데이터를 추가하는 데코레이터입니다.

내장 데코레이터 사용

TypeScript에는 다음과 같은 내장 데코레이터가 있습니다:

• @readonly: 속성을 읽기 전용으로 만듭니다.
• @enumerable: 속거성을 열거할 수 있는지 제어합니다.

이러한 데코레이터를 사용하면 속성이나 메서드의 동작을 직접 수정할 수 있습니다.

간단한 데코레이터 만들기

메시지를 기록하거나 기능을 추가하는 사용자 지정 데코레이터를 만들 수 있습니다:

속성에 적용합니다: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

클래스 데코레이터

클래스 데코레이터는 클래스 전체의 동작을 수정하거나 향상하는 데 사용됩니다:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

클래스에 적용합니다: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

메서드 데코레이터

메서드 데코레이터는 클래스 메서드의 동작을 수정합니다:

메서드에 사용합니다: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Angular에서 데코레이터 사용

Angular는 컴포넌트에 메타데이터를 추가하기 위해 데코레이터를 많이 사용합니다:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

@Component 데코레이터는 클래스를 Angular 컴포넌트로 정의합니다.

데코레이터 사용 모범 사례

데코레이터를 사용할 때는 다음 사항을 지키세요:

• 간단하고 목적에 집중하도록 작성하세요.
• 복잡한 로직이 아니라 메타데이터에 사용하세요.
• 가능하면 내장 데코레이터를 활용하여 시간을 절약하세요.

축하합니다!

TypeScript에서 데코레이터가 작동하는 방식과 코드를 수정하거나 향상하는 데 데코레이터를 사용하는 방법을 배웠습니다. 프로젝트에서 데코레이터를 능숙하게 사용할 수 있도록 계속 실험해 보세요!