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

); }

## 1.2. 클릭 이벤트

### 1.2.1. 기본 클릭 이벤트

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