1. 이벤트 처리

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

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

1.1.1. 이벤트란?

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

1.1.2. HTML vs React 이벤트 비교

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

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

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>
  );
}