AutoBind Decorator

function autobind(_1: any, _2: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  const adgDescriptor: PropertyDescriptor = {
    configurable: true,
    get() {
      const boundFn = originalMethod.bind(this);
      return boundFn;
    },
  };
  return adgDescriptor;
}

• 컴포넌트에 이벤트를 바인딩 하는 경우, this의 참조를 확인하자.

• 클래스 혹은 생성자 함수로 컴포넌트를 만들어서 콜백 이벤트를 바인딩 하는 경우를 주의해야함.

• 만들어둔 이벤트 함수를 this.onClick 의 this 가 의도하지 않는 곳일 확률이 높다.

  ⇒ bind this가 필요하다.

  — 해당 샘플 코드는 데코레이션을 통해서 컴포넌트에 this 바인딩을 자동으로 할 수 있게 만들어 둔 코드이다.

  • 파라미터는 objectDefineProperty를 통해 확인
  • 원본 메소드를 받아서 originalMethod 에 할당 한 뒤에 getter를 통해서 바인딩 시키고 리턴하여 해당 함수의 바인딩만 조작 후 그대로 사용할 수 있게 한다.

Validator (with Decorator)

• 사용하지 않는 값은 _ 언더대쉬를 사용한다.
• Version1
• Version2 - Refactoring

Component MockUp

• Version1 — 컴포넌트 추상화 적용 X
• Version2 — 컴포넌트 추상화