이벤트 흐름

이벤트 핸들러 안전 체크

사용자 입력이 들어오면 핸들러, 이벤트 객체, 상태 업데이트, 전파 여부를 순서대로 확인합니다.

이벤트 핸들러 안전 점검

이벤트 문제는 핸들러를 언제 실행했는지, 어떤 대상에서 값을 읽는지, 부모로 전파되는지로 갈립니다. JSX에는 실행 결과가 아니라 함수를 넘깁니다.

01

onClick={"{fn}"}

onClick={"{save()}"}처럼 즉시 실행하지 말고 함수 참조를 넘깁니다.

02

currentTarget

버튼 자신이 기준이면 event.currentTarget에서 값을 읽습니다.

03

() => select(id)

리스트 항목 id처럼 추가 인자는 짧은 래퍼 함수로 고정합니다.

04

stopPropagation

행 클릭과 내부 버튼 클릭이 겹치면 전파를 끊을 위치를 정합니다.