Event Handling

Event Handling의 차이

 

Event 적용 방법의 차이	형식 사진
HTML에서 사용하던 형식
React에서 사용하던 형식
1. React의 이벤트는 소문자가 아닌 카멜 케이스(camelCase) 이용
2. JSX를 사용해 이벤트 핸들러 전달하며, 직접 만든 컴포넌트에는 이벤트가 아닌 Props로 전달해야 함.
3. 즉, 전달 후 컴포넌트 내 기본 컴포넌트에 연결하는 것

 

 

---

React 합성 이벤트

• Synthetic Event ( 합성 이벤트 )

•  React에서 사용하는 이벤트는 브라우저의 기본 이벤트가 아니다!

• 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체

합성 이벤트(SyntheticEvent) – React

 

 

클래스 컴포넌트에서의 이벤트

 

• 클래스형 컴포넌트에서는 this를 사용해야 함수를 찾아갈 수 있다.

 

 

함수형 컴포넌트에서의 이벤트

함수에 넘겨줄 인자가 있다면 함수에서 함수로 넘겨주는 형태를 취해야 함.