5강. 이벤트 처리

1. 이벤트 처리

사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다.

1.1. React 이벤트 시스템 이해하기

1.1.1. 이벤트란?

**이벤트(Event)**는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다.

요약

일상 생활의 비유:

• 도어벨을 누르면(이벤트) → 초인종이 울린다(반응) • 리모컨 버튼을 누르면(이벤트) → TV 채널이 바뀐다(반응) • 웹페이지에서 버튼을 클릭하면(이벤트) → 무언가 실행된다(반응)

React에서는 이런 “반응”을 **이벤트 핸들러(Event Handler)**라는 함수로 정의한다.

1.1.2. HTML vs React 이벤트 비교

구분	HTML	React
이벤트명	소문자 `onclick`	카멜케이스 `onClick`
핸들러	문자열 `"handleClick()"`	함수 `{handleClick}`
기본 동작 방지	`return false`	`e.preventDefault()`

// HTML 방식
<button onclick="handleClick()">클릭</button>

// React 방식
<button onClick={handleClick}>클릭</button>

주의

⚠️ 가장 흔한 실수!

onClick={handleClick()} ❌ 잘못됨! onClick={handleClick} ✅ 올바름!

이유: 괄호를 붙이면 함수가 즉시 실행된다.

function Button() {
  const handleClick = () => {
    console.log("클릭됨");
  };

  return (
    <div>
      {/* ❌ 렌더링 시 즉시 실행 */}
      <button onClick={handleClick()}>잘못된 예</button>

      {/* ✅ 클릭 시에만 실행 */}
      <button onClick={handleClick}>올바른 예</button>
    </div>
  );
}

1.2. 클릭 이벤트

1.2.1. 기본 클릭 이벤트

function ClickExample() {
  const handleClick = () => {
    alert("클릭됨");
  };

  return (
    <div>
      <button onClick={handleClick}>버튼 1</button>
      <button onClick={() => alert("버튼 2")}>버튼 2</button>
    </div>
  );
}

1.2.2. 인자가 있는 함수 호출

function ButtonList() {
  const handleClick = (name) => {
    alert(`${name} 클릭됨`);
  };

  return (
    <div>
      {/* ✅ 올바름: 화살표 함수로 감싸기 */}
      <button onClick={() => handleClick("빨강")}>빨강</button>
      <button onClick={() => handleClick("파랑")}>파랑</button>
    </div>
  );
}

1.3. 폼 이벤트

1.3.1. onChange 이벤트

function InputExample() {
  const handleChange = (e) => {
    console.log("입력값:", e.target.value);
  };

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

1.3.2. onSubmit 이벤트

function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault(); // 페이지 새로고침 방지
    alert("제출됨");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="이름" />
      <button type="submit">제출</button>
    </form>
  );
}