3.5.1 이벤트 속성

HTML에서 이벤트 속성은 사용자가 특정 동작을 수행했을 때(예 마우스 클릭, 키 입력 등) 실행할 자바스크립트 코드를 지정하는 속성입니다. 리액트에서도 이벤트를 비슷한 방식으로 사용할 수 있습니다. 다만, 몇 가지 중요한 차이점이 있습니다.

HTML에서는 이벤트 속성을 소문자로 작성하고, 값은 문자열 형태의 자바스크립트 코드로 작성합니다. 반면에 리액트(JSX)에서는 이벤트 속성을 카멜 케이스(예 onClick, onSubmit)로 작성하고, 값으로 함수를 전달합니다.

예를 들어, 리액트에서 버튼 클릭 이벤트를 처리하고 싶다면 다음과 같이 작성합니다.

src/App.tsx

export default function App() {
  return (
    <>
      <button onClick={() => { alert('Button clicked!'); }}>click</button>
    </>
  );
}