데코레이터 기본편

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

완전 생소하죠? 오늘은 타입스크립트의 데코레이터에 대해서 알아보도록 하겠습니다.
이번 데코레이터 편은 양이 많습니다.
포스팅을 너무 나눠서 작성하면 오히려 이해가 어려울 수 있어 한 번에 작성했습니다.
오른쪽의 개요를 참고하며 보시길 권장합니다!

그리고 다음 포스팅인 올라갈 데코레이터 활용편과 함께 보시면 좀 더 이해에 도움이 될 것입니다 :)

🔗데코레이터 활용편 포스팅 보기

👀 대체 데코레이터란 무엇인가요?

타입스크립트에서 데코레이터(Decorator)는 클래스 및 클래스 멤버의 앞에 @로 작성하여 추가 기능을 부여할 수 있도록 해줍니다.
데코레이터는 함수 형태로 작성합니다.

function myDecorator(target) {
    // 'target' 변수와 함께 무언가를 수행합니다.
}

여기서 target은 데코레이터를 적용할 대상(클래스, 메서드, 프로퍼티 등등)입니다.
만약 이외에 다른 전달인자를 받아서 활용하고 싶다면 데코레이터 팩토리를 아래와 같이 사용합니다.

function myDecoratorFactory(value: string) { // 데코레이터 팩토리
    return function (target) { // 데코레이터
        // 'target'과 'value' 변수를 가지고 무언가를 수행합니다.
  };
}

기본적인 모양새는 이렇고,
적용할 대상이 어떤 것이냐에 따라 전달인자가 조금씩 차이가 있습니다.

이것을 활용하여 여러 작업이 가능한데요,
예제를 통해 자세히 알아보도록 하겠습니다!

👀 데코레이터 설정하기

프로젝트에서 데코레이터를 사용하기 위해서,
먼저 tsconfig 파일부터 수정해줍니다.
아래의 항목을 tsconfig.json 안에 추가해줍니다.

"experimentalDecorators": true

이렇게 설정하면 데코레이터를 사용할 수 있습니다.

👀 데코레이터 실행하기

데코레이터는 함수형태를 하고 있습니다.
어떻게 생겼는지 바로 예제를 볼까요?

이 예제는 클래스를 호출할 때
'학생의 정보를 출력합니다' 이 문구가 출력됩니다.

function PrintInfo(constructor: Function) {
	console.log("학생의 정보를 출력합니다:");
	console.log(constructor);
}

@PrintInfo
class Student {
	name = "김멍파치";

	constructor() {
		console.log(`학생의 이름은 ${this.name} 입니다.`);
	}
}

const student1 = new Student();

이처럼 데코레이터를 사용하면 클래스나 메서드 등에 덧붙여서 추가 기능을 사용할 수 있습니다!

👀 데코레이션 팩토리 실행하기

그런데 데코레이터에 추가로 원하는 매개변수를 받아 활용하면 어떨까요?
이럴 때 데코레이션 팩토리를 사용해볼 수 있습니다.

데코레이션 팩토리는 함수를 리턴하는 함수의 모양을 갖고 있습니다.
겉의 데코레이션 팩토리는 외부 함수의 형태로,
실제 데코레이터는 내부 함수 형태죠!

이 데코레이터를 활용하면 매개변수를 받아 클래스의 기능을 커스터마이징 하는 것처럼 사용할 수 있습니다.

아까 살펴본 예제를 활용하여 데코레이션 팩토리에 대해 좀 더 알아보겠습니다!

function PrintInfo(description: string) {
	return function(constructor: any){
      	const classObj=new constructor();
    	console.log(`${description} ${classObj.name}`);
    }
}

//주의! 끝에 세미콜론을 입력하지 마세요!
@PrintInfo('학생의 이름은 다음과 같아요: ')
class Student {
	name = "김멍파치";

	constructor() {
		console.log(`학생의 이름은 ${this.name} 입니다.`);
	}
}

const student1 = new Student();

원하는 문구를 매개변수로 받아 출력하도록 작성합니다.
실행구문 작성시 끝에 세미콜론은 넣지 마세요!
그리고 데코레이터 안의 내용을 내부 함수로 만들어 리턴하면 됩니다.

그러면 다음과 같은 결과가 나옵니다.

👀 데코레이터의 전달인자

데코레이터와 데코레이션 팩토리에 대해서 알아보았는데요,
데코레이터는 어떤 대상에 덧붙여 사용하냐에 따라 전달인자가 달라집니다.

각 데코레이터들은 어떤 전달인자를 받는지 아래의 표와 함께 공식 핸드북을 참고하며 확인하시는 게 좋습니다.

각 데코레이터의 전달인자

데코레이터 종류	전달인자 설명
클래스 데코레이터	1. 대상 클래스의 생성자
접근자, 메서드 데코레이터	1. 대상 클래스의 생성자 함수나 프로토타입 2. 접근자 혹은 메서드의 이름 3. 멤버의 프로퍼티 설명자
프로퍼티 데코레이터	1. 대상 클래스의 생성자 함수나 프로토타입 2. 프로퍼티의 이름
매개변수 데코레이터	1. 대상 클래스의 생성자 함수나 프로토타입 2. 매개변수가 속한 메서드의 이름 3. 매개 변수의 순서(인덱스. 0부터 몇번째 매개변수인지 숫자로!)

🔗 Typescript Handbook - Decorator

👀 데코레이터 실행순서

데코레이터가 여러 개 있을 때, 실행순서는 어떨까요?
작성한 데코레이터는 순서대로 읽어들이지만,
실행 순서는 가장 나중에 실행된 것부터 먼저 실행됩니다.

😝 마무리

오늘은 데코레이터 기본편에 대해 알아보았습니다.
내용이 많아서 정리하다가 분리하고, 순서도 바꾸느라 오래 걸렸어요...!
쉽지 않지만, 오늘도 이렇게 데코레이터를 정리하며 타입스크립트에 한발짝 다가갑니다.

저는 다음 시간에도 살아남을 수 있을까요?!😂

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/