React EventHandler

---

🖱️ Event Handler란?

정의

React Event Handler는 사용자 입력이나 브라우저 이벤트에 반응하기 위해 연결하는 함수다.

이벤트 이름은 on으로 시작하는 camelCase 형태를 사용한다.

🧩 특징

• 이벤트 처리 함수는 보통 컴포넌트 내부에 선언한다.
• JSX에서는 문자열이 아니라 함수 자체를 넘긴다.
• 필요하면 이벤트 객체를 매개변수로 받을 수 있다.
• e.target.value로 입력값을 자주 읽는다.

🛠️ 자주 쓰는 이벤트

onClick

• 버튼 클릭 같은 단순 액션에 사용한다.
• 함수가 바로 실행되지 않도록 주의한다.

<button onClick={() => setText("짜잔")}>클릭</button>

onChange

• input, textarea, select에서 자주 사용한다.
• 입력값 상태를 갱신할 때 가장 많이 쓴다.

<input
  type="text"
  placeholder="패스워드"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

⚙️ 이벤트 객체

function handleChange(e) {
  console.log(e.target.value);
}

• e.target은 이벤트가 발생한 요소다.
• 입력값은 보통 e.target.value로 읽는다.
• 체크박스는 e.target.checked를 사용한다.

⚠️ 주의점

• onClick={handleClick()}처럼 함수 호출 결과를 넣으면 안 된다.
• 이벤트 핸들러는 함수 참조를 넘겨야 한다.
• 입력값이 숫자여도 기본적으로 문자열로 들어오는 경우가 많다.

📌 정리

• React Event Handler는 사용자 입력을 처리하는 기본 방식이다.
• onClick, onChange를 가장 자주 사용한다.
• 이벤트 객체의 target을 잘 이해하면 폼 처리에 도움이 된다.

---

연결문서

• React-Component
• React-JSX
• React-Props
• React-Fragment