데코레이터 Decorator란?
이것저것 복잡한 개념이 등장하지만, 결국은 함수이다. 특정한 방법으로 어떤 것에 적용하는 함수이다.
@함수 문법을 통해 사용하며 클래스, 매개변수, setter/getter, 메서드를 꾸며주는(유용하게 변경해주는) 함수이다.
-> 컴파일 시 관여하지 않는다. (js에는 존재X)
- Java의 annotation 문법과는 개념이 다르다! -> 컴파일 시 관여
데코레이터를 사용하기 위한 사전 작업
데코레이터는 experimental 기능으로 빠져 있기 때문에 바로 사용이 불가능하다. 따라서 ts에게 해당 기능을 사용하겠다고 알려줘야하는데 tsconfig.json 파일에서 다음의 코드를 추가하면 된다.
tsc --init터미널에에서 위 코드를 실행하여 설정파일을 생성하면 된다. 위의 코드를 실행하면 많은 부분이 생략된 json 파일이 생성되는데, 데코레이터를 실행하기 위해 필요한 부분은 다음과 같다.
{
"compilerOptions": {
"target": "ES6",
// ... 많은 부분 생략
/* Experimental Options */
"experimentalDecorators": true,
}
}데코레이터 함수
function Logger(target: Function) {
console.log("Logging");
}
@Logger
class Person {
name = "1000yj";
constructor() {
console.log("Create new Person object");
}
}통상적으로 데코레이터는 대문자로 시작하도록 작성한다. 따라서 예시에서도 대문자로 시작하는 함수 Logger를 만들었다. 함수는 인자로 생성자를 전달받는다.
따라서 함수의 매개변수명을 다음과 같이 수정해주는 것이 좀더 직관적일 것이다.
function Logger(constructor: Function) {
console.log("Logging");
console.log(constructor);
}위의 코드를 실행하면 객체를 생성하기 전에 먼저 콘솔로그가 실행되는 것을 볼 수 있다.
데코레이터 팩토리
데코레이터 팩토리 방식은 데코레이터 함수를 감싸는 래퍼 함수를 선언하는 것이다. 보통 데코레이터가 선언에 적용되는 방식을 원하는 대로 바꾸고 싶을때 사용된다. 사용자로부터 인자를 전달받아 데코레이터 함수에게 넘겨주기 위해 팩토리 방식을 사용한다.
(원래 데코레이터 함수는 타겟 요소를 전달받기 때문에, 개발자가 원하는 인자를 전달할 수 없다)
위의 코드를 데코레이터 팩토리 방식으로 변경하면 다음과 같다.
function Logger(logString : string) {
return function(constructor: Function){
console.log(logString);
console.log(constructor);
}
}
@Logger("LOGGING - PERSON OBJECT")
class Person {
name = "1000yj";
constructor() {
console.log("Create new Person object");
}
}여러 개의 데코레이터 사용하기
데코레이터의 실행 흐름은 다음 순으로 처리된다.
각 데코레이터 표현식은 위에서 아래 방향(⬇︎)으로 평가하고
실행 결과는 아래에서 위로(⬆︎) 함수를 호출한다. 데코레이터 팩토리가 return문을 사용한다는 것에 포인트를 맞춰 이해하자.
데코레이터는 언제 실행되는가
- 클래스가 정의될 때 실행된다!
- 객체를 만들 때X (따라서 클래스를 사용하여 객체를 여러번 만든다고 데코레이터가 여러번 호출되지 않음)
- 클래스를 수정하지 않고 추가적인 기능을 넣거나 확장할 때 사용할 수 있다
