React.js event - 리액트 이벤트

Event

---

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

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

---

---

React Event의 특징

---

브라우저 호환성: 

합성 이벤트는 모든 브라우저에서 동일하게 동작하도록 추상화되어 있습니다. 

개발자가 브라우저별 호환성 문제를 신경 쓸 필요가 없습니다.

---

---

이벤트 객체

---

이벤트 핸들러 함수는 첫 번째 인자로 **이벤트 객체(Event Object)**를 받습니다. 

이 객체는 발생한 이벤트에 대한 정보를 담고 있습니다.

 

function MyInput() {
  function handleChange(event) {
    // event.target은 이벤트가 발생한 DOM 요소를 가리킵니다.
    // event.target.value는 입력 필드의 현재 값입니다.
    console.log('입력된 값:', event.target.value);
  }

  return (
    <input type="text" onChange={handleChange} placeholder="여기에 입력하세요" />
  );
}

---

---

결론

---

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

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

---