[ vite+React 기초학습 7] 이벤트 처리와 사용자 입력 받기

이벤트 처리란 무엇인가

이벤트는 사용자가 버튼 클릭, 키보드 입력, 마우스 이동 등으로 발생시키는 동작을 말합니다. React에서는 이벤트 핸들러 함수를 컴포넌트 내에 선언하여 처리합니다.

기본 개념

• 이벤트 이름은 camelCase (예: onClick)
• 이벤트 핸들러에 함수 전달
• JSX에서 직접 이벤트 바인딩 가능

주요 사용 위치/상황

• 버튼 클릭 시 동작 수행
• 입력 폼에서 사용자 입력값 처리
• 사용자 인터랙션 기반 UI 제어

구체적 코드 예시

function Button() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return <button onClick={handleClick}>클릭</button>;
}

핵심 요점 정리

• 이벤트 이름은 camelCase 규칙 준수
• 함수형 이벤트 핸들러 사용
• 사용자 행동에 따라 UI 반응 처리

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.