__컴포넌트 이벤트를 만들고 활용하는 법을 배운다.
https://lshjju.tistory.com/118
egoing - React - event
https://lshjju.tistory.com/130
React.js event - 리액트 이벤트
<aside> 💡
Event(이벤트)는 웹 페이지에서 발생하는 사용자의 행동이나 시스템의 변화를 의미합니다.
예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임, 페이지 로딩 등이 모두 이벤트에 해당합니다
</aside>
이벤트는 사용자의 **행동(Click, Change, Submit 등)**에 반응하는 방식
특징
카멜 케이스(camelCase) 사용
onclick, onchange와 비슷하지만 React에서는 onClick처럼 카멜 케이스를 사용코드 다이어트
props + event
예시
// 부모
<Child onClick={handleClick} />
// 자식
<button onClick={props.onClick}>실행</button>
부모 컴포넌트
└─ props로 함수 전달
└─ 자식에서 이벤트 발생
└─ props로 받은 함수 실행
핵심 비교
| 항목 | 설명 |
|---|---|
| props | 부모 → 자식에게 데이터나 함수 전달 |
| event | 사용자 행동에 반응하는 기능 (onClick 등) |
| props + event | 자식에서 이벤트 발생 시, 부모 함수 호출 |
| 주요 목적 | 단방향 데이터 흐름 유지, 컴포넌트 간 상호작용 구현 |
React Event는 사용자의 상호작용에 반응하여 웹 페이지를 동적으로 만들 수 있게 해주는 중요한 기능입니다.
React의 합성 이벤트 시스템 덕분에 개발자는 브라우저 호환성 걱정 없이 일관된 방식으로 이벤트를 처리하고, 효율적인 성능을 유지할 수 있습니다.