이벤트

__컴포넌트 이벤트를 만들고 활용하는 법을 배운다.

https://lshjju.tistory.com/118

egoing - React - event

https://lshjju.tistory.com/130

React.js event - 리액트 이벤트

<aside> 💡

Event(이벤트)는 웹 페이지에서 발생하는 사용자의 행동이나 시스템의 변화를 의미합니다.

예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임, 페이지 로딩 등이 모두 이벤트에 해당합니다

</aside>

react event

• 이벤트는 사용자의 **행동(Click, Change, Submit 등)**에 반응하는 방식

• 특징

• 카멜 케이스(camelCase) 사용

  • HTML의 onclick, onchange와 비슷하지만 React에서는 onClick처럼 카멜 케이스를 사용

• 코드 다이어트

  • 화살표 함수
    • function을 축약해서 사용하는 방식

• props + event

  • 부모가 함수를 정의하고 자식에게 props로 전달
  • 자식은 해당 함수를 이벤트 발생 시 실행함
  • 자식이 부모의 동작을 "요청"하는 방식

  예시

  
  // 부모
  <Child onClick={handleClick} />
  
  // 자식
  <button onClick={props.onClick}>실행</button>
  
  

  • 흐름 요약

  부모 컴포넌트
   └─ props로 함수 전달
        └─ 자식에서 이벤트 발생
              └─ props로 받은 함수 실행
  

  • 핵심 비교

    항목	설명
    props	부모 → 자식에게 데이터나 함수 전달
    event	사용자 행동에 반응하는 기능 (onClick 등)
    props + event	자식에서 이벤트 발생 시, 부모 함수 호출
    주요 목적	단방향 데이터 흐름 유지, 컴포넌트 간 상호작용 구현

결론

React Event는 사용자의 상호작용에 반응하여 웹 페이지를 동적으로 만들 수 있게 해주는 중요한 기능입니다.

React의 합성 이벤트 시스템 덕분에 개발자는 브라우저 호환성 걱정 없이 일관된 방식으로 이벤트를 처리하고, 효율적인 성능을 유지할 수 있습니다.

state