# 데코레이터 / 팩토리

## 데코레이터

데코레이터는 [**클래스**](https://yamoo9.gitbook.io/typescript/decorator/classes)**,** [**속성**](https://yamoo9.gitbook.io/typescript/decorator/properties)**,** [**메서드**](https://yamoo9.gitbook.io/typescript/decorator/methods)**,** [**접근 제어자**](https://yamoo9.gitbook.io/typescript/decorator/accessor)**,** [**매개변수**](https://yamoo9.gitbook.io/typescript/decorator/parameters) **등에 사용할 수 있는 특별한 함수**입니다. 선언된 데코레이터 함수를 사용할 때는 데코레이터 이름 앞에 `@`를 붙입니다.

```typescript
// 데코레이터 함수
function Component(target:Function) {
  console.log(target);
  console.log(target.prototype);
}

// 데코레이터를 사용한 클래스 TabsComponent 정의
@Component
class TabsComponent {}
```

{% hint style="info" %}
클래스, 속성, 메서드, 접근자, 매개변수에 따라 데코레이터 함수가 전달 받는 인자는 각각 다릅니다.
{% endhint %}

{% embed url="<https://stackblitz.com/edit/ts-decorator?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1>" %}

## 데코레이터 팩토리

함수 사용 시, 사용자가 인자를 전달할 수 있는 것과 유사하게, 데코레이터 함수 또한 팩토리를 사용해 사용자로부터 인자를 전달 받도록 설정할 수 있습니다. **데코레이터 팩토리 함수는 데코레이터 함수를 감싸는 래퍼 함수**입니다. 팩토리는 사용자로부터 전달 받은 인자를, 내부에서 반환되는 데코레이터 함수는 데코레이터로 사용됩니다.

```typescript
// 데코레이터 팩토리
function Component(value:string) {
  console.log(value);
  
  // 데코레이터 함수
  return function(target:Function) {
    console.log(target);
    console.log(target.prototype);
  }
  
}

// 데코레이터 팩토리를 사용하면 값을 전달할 수 있습니다.
@Component('tabs')
class TabsComponent {}

// TabsComponent 객체 생성
const tabs = new TabsComponent();
```

{% embed url="<https://stackblitz.com/edit/ts-decorator-factory?embed=1&file=index.ts&hideExplorer=1&hideNavigation=1>" %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://www.typescriptlang.org/docs/handbook/decorators.html>" %}
TypeScript - 데코레이터
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/decorator/factory.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.