핸들러 연결
JSX 속성에는 실행 결과가 아니라 함수 참조를 전달합니다.
이벤트 코드는 네 가지 확인
어떤 일이 발생했는지, 어떤 값을 읽는지, 상태를 어떻게 바꾸는지, 기본 동작을 막아야 하는지 순서대로 점검합니다.
대상 값 읽기
입력값은 e.target.value처럼 이벤트 객체에서 꺼냅니다.
상태 업데이트
setState 계열 함수로 화면에 반영될 데이터를 바꿉니다.
전파와 기본 동작
필요할 때 stopPropagation 또는 preventDefault를 사용합니다.
사용자 행동
SyntheticEvent
handler 실행
state 변경
UI 갱신
이벤트 코드 실수 방지
이벤트 핸들러에 인자가 필요하면 화살표 함수로 감싸고, 폼 제출이나 링크 이동처럼 브라우저 기본 동작이 있는지 함께 확인합니다.