Event (이벤트)

 

🟡 Event

웹 페이지 내에서 발생하는 사용자의 행동(버튼 클릭, 키보드 입력, 마우스 이동 등)이나 시스템의 변화(페이지 로딩 완료 등)를 의미한다.

React는 이러한 이벤트 발생 시 특정 로직을 실행하는 이벤트 핸들러(Event Handler) 함수를 연결하여 사용자와 상호작용한다.

 

◼️ 주요 특징

// HTML 방식
<button onclick="activate()">Click</button>

// React 방식
<button onClick={activate}>Click</button>

• CamelCase 명명 규칙: 표준 HTML의 이벤트 속성은 소문자(onclick, onchange)를 사용하지만, React JSX에서는 카멜 케이스(CamelCase) 문법을 사용하여 onClick, onChange로 작성해야 한다.
• 함수 형태의 값 전달: HTML에서는 이벤트 속성에 문자열 형식(onclick="activate()" 등)으로 코드를 전달하지만, React에서는 중괄호{} 내에 함수 자체를 전달한다.
• 합성 이벤트 (SyntheticEvent)를 통한 브라우저 호환성
  • React는 브라우저 고유의 네이티브 이벤트를 직접 다루지 않고, 이를 감싼 합성 이벤트(SyntheticEvent) 객체를 사용한다.
  • 크롬, 사파리, 파이어폭스 등 모든 브라우저에서 이벤트가 동일하게 동작하도록 추상화되어 있어, 크로스 브라우징 문제를 신경 쓸 필요가 없다.

 

◼️ 이벤트 객체 (Event Object)

이벤트 핸들러 함수는 첫 번째 인자로 발생한 이벤트의 상세 정보를 담고 있는 이벤트 객체를 전달받는다.

function MyInput() {
  function handleChange(event) {
    // event.target: 이벤트가 발생한 DOM 요소 (여기서는 <input>)
    // event.target.value: 입력 필드에 작성된 현재 텍스트 값
    console.log('입력된 값:', event.target.value);
  }

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

 

 

📍  POINT 📍 

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

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