Event Handling

React 이벤트 처리 점검표

React 이벤트는 DOM 이벤트를 그대로 쓰는 것이 아니라 컴포넌트 상태 변경으로 연결하는 약속입니다.

01 onClick={handleClick}

함수를 실행하지 않고 참조로 넘긴다.

참조 전달
02 () => handler(id)

렌더 중 호출되지 않게 래핑한다.

인자 전달
03 setState

이벤트 결과는 상태 갱신으로 남긴다.

상태 변경
구분기준처리
잘못된 예 onClick={handler()} 렌더 중 실행
좋은 예 onClick={handler} 클릭 때 실행
인자 필요 onClick={() => handler(id)} 값 전달

핵심 이벤트 핸들러는 렌더 시점이 아니라 사용자 동작 시점에 실행되어야 한다.