> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/typescript/decorator/factory.md).

# 데코레이터 / 팩토리

## 데코레이터

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

```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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.