3.5.2 이벤트 핸들러

이벤트 핸들러는 이벤트가 발생했을 때 실행할 함수입니다. 리액트에서는 JSX 요소에 이벤트 속성을 사용해 이벤트를 등록합니다. 이때 이벤트 속성에 이벤트 핸들러를 할당해야 합니다.

이벤트 핸들러를 작성하는 방식에는 두 가지가 있습니다.

● 인라인 핸들러

인라인 핸들러(inline handler)는 이벤트 속성 안에 함수를 직접 작성하는 방식입니다. 예를 들어, 버튼을 클릭했을 때 경고창을 띄우고 싶다면 다음과 같이 작성합니다.

src/App.tsx

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