$event

// React 예시

<button onClick={e => e.stopPropagation()}>

  클릭

</button>

 

 

 

// Angular 예시

<button onClick= $event.stopPropagation()>

  클릭

</button>

 

$event가 자동으로 전달된다

화살표함수를 쓰지않는다

 

1. this 바인딩

• React(클래스 컴포넌트):
  이벤트 핸들러를 메서드로 넘길 때, this가 자동으로 바인딩되지 않습니다.
  그래서 화살표 함수(혹은 바인딩)를 써야 합니다.
• Angular:
  템플릿에서 메서드를 호출하면 Angular가 자동으로 컴포넌트 인스턴스의 this를 바인딩해줍니다.

2. 인자 전달 방식

• React:
  JSX에서 이벤트 핸들러에 인자를 넘기려면,
  onClick={e => handleClick(e, id)}처럼 화살표 함수로 감싸야 합니다.
  그렇지 않으면 함수가 바로 실행되거나, 인자를 넘길 수 없습니다.
• Angular:
  템플릿에서 (click)="onClick($event, id)"처럼 바로 인자를 넘길 수 있습니다.

결론

• this 바인딩 문제와 템플릿 문법의 차이가 모두 영향을 줍니다.
• Angular는 템플릿에서 함수 호출과 인자 전달, this 바인딩을 모두 자동으로 처리해주기 때문에 화살표 함수를 쓸 필요가 없습니다.
• React는 JSX 문법상 인자 전달을 위해 화살표 함수가 필요하고, 클래스 컴포넌트에서는 this 바인딩도 신경 써야 합니다. (함수 컴포넌트에서는 this 이슈는 없습니다.)