이벤트 핸들러가 상태 변경으로 이어지는 경로

행동 발생

사용자가 클릭, 입력, 제출, 키 입력 같은 브라우저 이벤트를 만든다.

React가 JSX 속성에 연결된 함수를 호출하고 event 객체를 전달한다.

DOM 세부 값은 선택, 저장, 검색 같은 앱 의미로 바뀐다.

state 변경 또는 부모 콜백 호출 뒤 새 렌더 결과가 반영된다.

onClick

명령 행동 선택, 열기, 삭제, 저장 요청 같은 버튼 행동

즉시 실행하지 않고 함수 전달

onChange

입력 동기화 input value를 state와 맞춤

IME와 validation 시점 고려

onSubmit

폼 제출 preventDefault 후 검증과 요청 실행

중복 제출 방지

currentTarget

핸들러가 붙은 요소 target과 다를 수 있어 이벤트 위임에서 중요

타입 좁히기 필요

함수 전달 onClick={handleClick()}처럼 렌더 중 실행하지 않는다.

기본 동작 폼 제출이 페이지 새로고침을 만들지 않게 처리한다.

의미 핸들러 내부에서 DOM 값과 도메인 행동을 분리한다.

비동기 요청 중 버튼 상태와 오류 처리가 연결된다.