본문으로 건너뛰기

데코레이터(Decorator)

아직 JS의 정식 기능이 아니다. ECMA TC39의 표준화 절차를 진행하고 있다.
Babel을 사용해서 사용할 수 있다.

새 함수를 반환하여 전달된 함수 또는 메서드의 동작을 수정하는 함수
함수를 일급 시민으로서의 기능을 지원하는 모든 언어는 데코레이터를 구현할 수 있다.

파이썬 예제

파이썬의 데코레이터가 JS의 데코레이터 작동 방식보다 단순하여 설명하기 좋다.

def cashify(fn):  def wrap():    print("$$$$")    fn()    print("$$$$")  return wrap
@cashifydef sayHello():  print("hello!")
sayHello()
# $$$$
# hello!
# $$$$

속성 설명자#

JS 객체는 프로퍼티가 있고, 각 프로퍼티는 값 뿐만 아니라 숨겨진 정보들을 갖는다 .

Object.getOwnPropertyDescriptor / Object.getOwnPropertyDescriptors 를 사용해 알 수 있다.

const oatmeal = {    viscosity: 20,    flavor: 'Brown Sugar Cinnamon',};
console.log(Object.getOwnPropertyDescriptor(oatmeal, 'viscosity'));
/*{  value: 20,  writable: true,  enumerable: true,  configurable: true,}*/

객체의 접근자 프로퍼티는 value와 writable이 없는 대신에 get과 set이라는 함수가 있다.

데코레이터 작성법#

JS 데코레이터 함수에는 세 가지 인자가전달된다.
1. target : 현재 인스턴스 객체의 클래스
2. key : 데코레이터를 적용할 속성 이름(문자열 )
3. descriptor : 해당 속성의 설명자 객체 - 객체의 메서드나속성을 꾸미려면새로운 속성 설명자를반환해야 한다. - 속성을 읽기전용으로 만드는 데코레이터

function readOnly(target, key, descriptor) {    return {...descriptor, writable: false};}
class Oatmeal extends Porridge {    @readOnly viscosity = 20;
    constructor(flavor) {        super();        this.flavor = flavor;    }}

TypeScript#

tsconfig.json에서experimentalDecorators 컴파일러 옵션을 활성화해야 한다.

데코레이터 합성#

참고자료#

속성 설명자
- 데코레이터 작성법
TypeScript
- 데코레이터 합성
참고자료