사용자의 클릭에 반응하기 — 이벤트 처리

이벤트(event)는 사용자가 화면에서 하는 동작이에요. 버튼을 클릭하거나, 입력창에 글자를 입력하거나, 폼을 제출하는 것 모두 이벤트예요. 리액트에서는 이런 이벤트에 함수를 연결해 반응하게 만들어요.

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

// JSX (리액트 방식) — 카멜케이스 + 중괄호
<button onClick={handleClick}>클릭</button>

// ✅ 올바름 — 카멜케이스
<button onClick={hello}>클릭</button>
<input onChange={handleChange} />

// ❌ 안 됨 — 소문자(HTML 습관)
<button onclick={hello}>클릭</button>
<input onchange={handleChange} />

이벤트에 연결하는 함수를 이벤트 핸들러(handler)라고 불러요. 연결할 때는 함수의 이름(참조)만 넘겨요. 괄호 ()를 붙이면 지금 당장 호출해버리는 뜻이 되어 완전히 달라져요.

function App() {
  function handleClick() {
    alert('버튼이 눌렸어요!');
  }

  // JSX : ✅ 함수 자체(참조)를 전달 — 클릭할 때 실행됨
  return <button onClick={handleClick}>클릭</button>;
}

// ❌ 잘못 — 렌더 시 즉시 호출되어 버림 (무한 실행/즉시 alert 등)
<button onClick={handleClick()}>클릭</button>

// ✅ 올바름 — 함수 참조만 전달, 클릭할 때 호출
<button onClick={handleClick}>클릭</button>

<button onClick={handleClick}>클릭</button>;
                ↑           ↑
                이 중괄호 두 개

// 중괄호 { } 는 "여기 안에 자바스크립트 표현식을 넣는다" 라는 신호임. → JSX 문법 (JS 표현식을 넣으라는 신호)
// JSX 안에서 순수 자바스크립트 코드(변수, 함수, 계산식 등)를 쓰고 싶을 때 중괄호 { }로 감싸는 규칙이 있음

//✅ 위의 코드는 내부적으로 React.createElement 로 변환된다
React.createElement('button', { onClick: handleClick }, '클릭')
                              ↑                      ↑
                                  여기서의 중괄호 두 개

// { onClick: handleClick }는 완전히 다른 괄호이다. → JS 문법 (JS 객체 리터럴 문법)
// 이 괄호는 자바스크립트의 객체 리터를을 만드는 중괄호이다. { } 안에 key: value 형태 → 예: { name: "철수", age: 20 }

function hello() { console.log("안녕"); }

const a = hello;    // 함수 "자체"를 저장 → a 는 함수
const b = hello();  // 함수를 "실행한 결과"를 저장 → b 는 undefined

function handleClick() {
  alert("버튼이 눌렸어요!");
}

<button onClick={handleClick}>클릭</button>
// onClick     → 클릭 이벤트를 감시하는 속성
// handleClick → 클릭이 나면 실행할 이벤트 핸들러

이벤트가 일어나면 리액트는 핸들러의 첫 번째 인자로 이벤트 객체 e를 넘겨줘요(리액트에서는 브라우저 이벤트를 감싼 합성 이벤트(SyntheticEvent)예요). 이 e 안에 이벤트에 대한 정보가 들어 있어요.

function SearchBox() {
  function handleChange(e) {
    console.log(e.target.value); // 입력된 글자
  }

  return <input onChange={handleChange} />;
}

function Form() {
  function handleSubmit(e) {
    e.preventDefault();     // 새로고침 막기
    console.log('제출 처리!');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button>보내기</button>
    </form>
  );
}

function add(a, b) {
  return a + b;
}

const add = (a, b) => a + b;

핸들러에 특정 값(예: id)을 함께 넘기고 싶을 때가 있어요. 이때 onClick={handleClick(id)}라고 쓰면 앞에서 배운 것처럼 렌더 시 즉시 호출되어 버려요. 해결책은 화살표 함수로 감싸는 것이에요.

// ❌ 즉시 호출됨 — 클릭 전에 실행되어 버림
<button onClick={handleClick(id)}>삭제</button>

// ✅ 화살표로 감싸기 — 클릭할 때 handleClick(id) 실행
<button onClick={() => handleClick(id)}>삭제</button>

동작이 아주 짧으면, 별도 함수를 선언하지 않고 화살표 함수를 그 자리(inline)에 바로 써도 돼요. 예를 들어 클릭할 때마다 카운트를 1 올리는 건 이렇게 쓸 수 있어요.

// state는 CH04에서 배웠어요 (useState)
<button onClick={() => setCount(count + 1)}>
  +1
</button>