# 데코레이터 구성
## 멀티 데코레이터
데코레이터는 하나 이상 연결해 사용할 수 있습니다. 멀티 데코레이터는 수평 또는 수직 나열하여 사용할 수 있습니다.
{% code title="수평 나열" %}
```typescript
@Size @Color class Button {}
```
{% endcode %}
{% code title="수직 나열" %}
```typescript
@Size
@Color
class Button {}
```
{% endcode %}
## 실행흐름(평가/호출)
데코레이터의 실행 흐름은 다음 순으로 처리됩니다.
1. 각 데코레이터 표현식은 위에서 아래 방향(⬇︎)으로 평가됩니다.
2. 결과는 아래에서 위로(⬆︎) 함수를 호출합니다.
데코레이터 팩토리를 사용해 멀티 데코레이터의 실행 흐름을 살펴보는 것이 이해가 빠를 겁니다.
```typescript
// Size 데코레이터 팩토리
function Size() {
console.log('Size(): 평가됨');
// Size 데코레이터
return function(target:any, prop:string, desc:PropertyDescriptor){
console.log('Size(): 실행됨')
}
}
// Color 데코레이터 팩토리
function Color() {
console.log('Color(): 평가됨');
// Color 데코레이터
return function(target:any, prop:string, desc:PropertyDescriptor){
console.log('Color(): 실행됨')
}
}
// Button 클래스 정의
class Button {
// 메서드에 멀티 데코레이터 적용
@Size()
@Color()
isPressed() {}
}
```
console에 출력되는 결과는 다음과 같습니다.
{% code title="Console" %}
```bash
Size(): 평가됨
Color(): 평가됨
Color(): 실행됨
Size(): 실행
```
{% endcode %}
{% embed url="" %}
## 참고
{% embed url="" %}
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/composition.md?ask=
```
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.