React 이벤트 처리 (Event Handling)

🎯 이벤트 처리 (Event Handling)

React에서는 HTML의 DOM 이벤트 처리 방식과 유사하지만, 몇 가지 중요한 차이가 있습니다. 이 강좌에서는 onClick, onChange 같은 대표적인 이벤트를 예제로 설명합니다.

⚙️ 기본 이벤트 처리 방법

HTML과는 달리 이벤트 속성 이름이 카멜 케이스이며, 문자열이 아닌 함수를 전달해야 합니다.

function ClickButton() {
  function handleClick() {
    alert('버튼이 클릭되었습니다!');
  }

  return <button onClick={handleClick}>클릭해보세요</button>;
}
  

🖋️ 이벤트 객체(Event Object)

React에서도 event 객체가 인자로 전달되며, 기본 이벤트를 막거나 세부 정보 접근이 가능합니다.

function FormSubmit() {
  function handleSubmit(e) {
    e.preventDefault(); // 기본 제출 동작 방지
    alert('폼이 제출되었습니다!');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">제출하기</button>
    </form>
  );
}
  

🎯 주요 이벤트 예제

📌 입력 필드(onChange)

import { useState } from 'react';

function InputField() {
  const [value, setValue] = useState('');

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>입력값: {value}</p>
    </div>
  );
}
  

📌 마우스 이벤트(onMouseEnter)

function HoverBox() {
  function handleMouseEnter() {
    console.log('마우스가 올라갔습니다!');
  }

  return <div onMouseEnter={handleMouseEnter} style={{padding:'10px', border:'1px solid #ccc'}}>
    마우스를 올려보세요
  </div>;
}
  

💡 팁: 함수 전달 시 주의점

이벤트 핸들러에 함수를 전달할 때 ()를 붙이면 즉시 실행되므로, 참조만 전달하도록 작성해야 합니다.

// 잘못된 예: 실행되어버림!
<button onClick={handleClick()}>버튼</button>

// 올바른 예:
<button onClick={handleClick}>버튼</button>