1. html과의 차이점

이벤트 이름

리액트에서 이벤트 이름은 camelCase를 사용합니다. 예를 들어, JavaScript의 클릭 이벤트는 'onclick'인데 반해, 리액트에서는 'onClick'으로 표기합니다.

이벤트 핸들러

리액트에서 이벤트 핸들러는 문자열이 아닌 함수의 형태로 전달됩니다.

이벤트 객체

원래 JavaScript에서 이벤트 핸들러는 SyntheticEvent라는 리액트의 이벤트 객체를 전달받습니다. 이 객체는 웹 브라우저의 네이티브 이벤트와 인터페이스가 동일하여 이식성을 보장합니다.

html 코드

<button onclick="activateButton()">클릭하세요</button>

react 코드

<button onClick={activateButton}>클릭하세요</button>

이벤트 설정은 DOM요소에만 가능합니다. div, button, input, form, span 등의 DOM 요소에는 이벤트 설정이 가능하지만, 리액트의 컴포넌트에는 불가능합니다.

function App() {
  const printText= () => {
    console.log('hello');
  }

  return (
      <SomeComponent onClick={printText} />
  );
}