사용자 행동을 핸들러로 받아 상태 변경 의도를 표현합니다.
onClick에는 호출 결과가 아니라 함수를 전달합니다. 핸들러는 이벤트 객체를 받을 수 있고 브라우저 기본 동작을 막아야 할 때만 preventDefault를 사용합니다.
구현 함수는 handleSave, 자식에 전달하는 prop은 onSave처럼 사건 중심으로 이름 붙입니다.
렌더 중 handleSave()를 호출하면 반복 렌더의 원인이 되므로 함수 참조를 전달합니다.
stopPropagation을 습관적으로 사용하면 상위 이벤트 위임과 분석 처리를 막습니다.
로컬 프로젝트에서 확인해보세요초기화 버튼과 handleReset을 추가하세요.
import { useState } from "react";
export default function App() {
const [message, setMessage] = useState("저장 전");
return (
<main>
<button onClick={() => setMessage("저장했습니다")}>저장</button>
<p aria-live="polite">{message}</p>
</main>
);
}