이벤트에 응답하기

React에서는 JSX에 이벤트 핸들러를 추가할 수 있습니다. 이벤트 핸들러는 클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수입니다.

이벤트 핸들러 추가하기

1️⃣ 이벤트 핸들러 정의

이벤트 핸들러를 추가하려면 먼저 함수를 정의해야 합니다.

2️⃣ JSX에서 핸들러 전달

정의한 함수를 적절한 JSX 태그의 prop으로 전달하여 이벤트를 처리합니다.

🔹 아래 예시는 아직 동작하지 않는 버튼을 포함하고 있습니다.

1️⃣ 핸들러 함수 선언

Button 컴포넌트 내부에 handleClick 함수를 정의합니다.

2️⃣ 이벤트 로직 구현

클릭 시 메시지를 표시하기 위해 alert를 사용합니다.

3️⃣ JSX에 이벤트 추가

<button> 요소의 onClick 속성에 handleClick 함수를 연결합니다.

1️⃣ 이벤트 핸들러 정의

handleClick 함수를 컴포넌트 내부에서 정의합니다.