Angular에서 TypeScript 데코레이터를 사용하는 방법

TypeScript 데코레이터는 클래스, 메서드, 접근자, 속성 또는 매개변수에 첨부할 수 있는 특별한 종류의 선언입니다. Angular에서 데코레이터는 클래스에 메타데이터를 추가하는 방법을 제공하여 재사용 가능한 구성 요소, 서비스 등을 만드는 데 매우 강력합니다. 이 가이드는 Angular에서 TypeScript 데코레이터를 사용하는 방법을 설명하고 사용법을 더 잘 이해하는 데 도움이 되는 예를 제공합니다.

TypeScript 데코레이터란 무엇인가요?

데코레이터는 클래스 또는 클래스 멤버의 동작을 수정하는 함수입니다. Angular에서 데코레이터는 구성 요소, 지시문, 파이프 및 주입 가능한 서비스를 정의하는 데 사용됩니다. 데코레이터는 클래스에 메타데이터를 적용하는 선언적 방법을 제공하며, Angular는 이를 구성 요소의 인스턴스를 만들거나 종속성을 주입하는 등 다양한 목적으로 사용합니다.

일반적인 각도 장식자

Angular에는 다양한 용도로 사용되는 여러 내장 데코레이터가 있습니다. 가장 일반적인 Angular 데코레이터는 다음과 같습니다.

@Component - Angular 컴포넌트를 정의합니다.
@Directive - Angular 지시문을 정의합니다.
@Pipe - Angular 파이프를 정의합니다.
@Injectable - 다른 구성 요소나 서비스에 주입될 수 있는 서비스를 정의합니다.
@Input - 속성을 장식하여 데이터 바인딩 입력으로 만듭니다.
@Output - 이벤트 바인딩 출력으로 속성을 장식합니다.

@Component 데코레이터 사용

@Component 데코레이터는 Angular 구성 요소를 정의하는 데 사용됩니다. 선택기, 템플릿, 스타일 및 기타 구성과 같은 구성 요소에 대한 메타데이터를 제공합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

이 예에서 @Component 데코레이터는 "Hello, World!"를 표시하는 템플릿이 있는 간단한 구성 요소를 정의합니다. selector은 이 구성 요소에 사용할 사용자 지정 HTML 태그를 지정합니다.

@Injectable Decorator 사용하기

@Injectable 데코레이터는 다른 구성 요소나 서비스에 주입할 수 있는 서비스 클래스를 정의하는 데 사용됩니다. Angular의 종속성 주입 시스템의 필수적인 부분입니다.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

여기서 @Injectable 데코레이터는 DataService을 애플리케이션 전체에서 종속성 주입에 사용할 수 있도록 합니다.

@Input 및 @Output 데코레이터 사용

@Input 및 @Output 데코레이터는 Angular 구성 요소에서 입력 속성과 출력 이벤트를 만드는 데 사용됩니다. 일반적으로 구성 요소 통신에 사용됩니다.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

이 예에서 @Input 데코레이터는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. @Output 데코레이터는 이벤트를 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 다시 보내는 데 사용됩니다.

사용자 정의 데코레이터 만들기

사용자 정의 데코레이터는 Angular에서 클래스, 메서드 또는 속성에 특정 동작이나 메타데이터를 추가하기 위해 만들 수 있습니다. 아래는 간단한 클래스 데코레이터의 예입니다.

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

여기서 LogClass 함수는 정의될 때 클래스를 콘솔에 로깅하는 사용자 지정 데코레이터입니다. @LogClass을 MyService에 적용하면 생성 중에 메시지가 로깅됩니다.

결론

Angular의 데코레이터는 클래스, 메서드, 속성 및 매개변수에 메타데이터와 동작을 추가하는 강력한 방법을 제공합니다. @Component, @Injectable, @Input, @Output과 같은 기본 제공 데코레이터를 사용하는 방법을 이해하는 것은 효과적인 Angular 개발에 필수적입니다. 또한, 애플리케이션의 특정 요구 사항을 충족하도록 사용자 지정 데코레이터를 만들어 개발 프로세스에 유연성을 더할 수 있습니다.

타입스크립트 데코레이터 각도 컴포넌트 입력 출력 주입 가능 서비스 사용자 정의 메타데이터 예제 타입스크립트 데코레이터 클래스 함수