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()`

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

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

주의

⚠️ 가장 흔한 실수!

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

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

1
function Button() {
2
  const handleClick = () => {
3
    console.log("클릭됨");
4
  };
5

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

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

1.2. 클릭 이벤트

1.2.1. 기본 클릭 이벤트

1
function ClickExample() {
2
  const handleClick = () => {
3
    alert("클릭됨");
4
  };
5

6
  return (
7
    <div>
8
      <button onClick={handleClick}>버튼 1</button>
9
      <button onClick={() => alert("버튼 2")}>버튼 2</button>
10
    </div>
11
  );
12
}

1.2.2. 인자가 있는 함수 호출

1
function ButtonList() {
2
  const handleClick = (name) => {
3
    alert(`${name} 클릭됨`);
4
  };
5

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

1.3. 폼 이벤트

1.3.1. onChange 이벤트

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

6
  return (
7
    <div>
8
      <input
9
        type="text"
10
        onChange={handleChange}
11
        placeholder="입력하세요"
12
      />
13
    </div>
14
  );
15
}

1.3.2. onSubmit 이벤트

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

7
  return (
8
    <form onSubmit={handleSubmit}>
9
      <input type="text" name="username" placeholder="이름" />
10
      <button type="submit">제출</button>
11
    </form>
12
  );
13
}