React 이벤트에 대해서

웹 애플리케이션에서는 다양한 사용자 행동이 발생한다.

• 버튼 클릭
• 입력창에 텍스트 입력
• 마우스 이동
• 스크롤

이러한 사용자 행동을 이벤트(Event)라고 한다.

그리고 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러(Event Handler)라고 한다.

 

---

 

1️⃣ React 이벤트 핸들링

React에서는 HTML과 비슷하지만 camelCase 방식으로 이벤트를 작성한다.

<button onClick={handleClick}>클릭</button>

 

---

 

2️⃣ 왜 화살표 함수를 사용하는가?

1. 함수와 함수 호출의 차이

<button onClick={handleClick}>Click</button>

• handleClick → 함수 자체를 전달
• handleClick() → 함수를 바로 실행한 결과를 전달

즉, onClick에는 “함수 실행 결과”가 아니라 “함수 자체”가 필요하다.

// 잘못된 예시
<button onClick={handleClick()}>Click</button>

• 이건 렌더링 되는 순간 바로 함수가 실행됨
• 클릭과 상관없이 alert가 뜨거나, 의도치 않은 동작 발생

 

 

2. 왜 화살표 함수가 필요한가?

화살표 함수를 쓰는 주된 이유는 인자를 전달하거나 즉시 실행하지 않고 호출 시점 조정 때문이다.

<button onClick={() => handleClick(id)}>삭제</button>

• handleClick(id)를 바로 쓰면 렌더링 순간 실행됨
• () => handleClick(id) → 클릭할 때 실행됨

즉, 화살표 함수는 이벤트가 발생했을 때 호출되는 “콜백 함수”를 만들어주는 wrapper 역할을 한다. 그래서 반드시 함수 자체를 전달해야 한다.

 

 

3. 일반 함수와 화살표 함수 비교

const handleClick = (id) => console.log(id);

// 화살표 함수로 전달
<button onClick={() => handleClick(3)}>Click</button>

// 함수 이름만 전달
<button onClick={handleClick}>Click</button> // 인자 없이 호출 가능

• 인자가 필요 없으면 함수 이름만 전달해도 OK
• 인자가 필요하면 화살표 함수로 감싸서 호출 시점 제어

 

 

---

 

3️⃣ React 이벤트 객체

React 이벤트 핸들러에는 이벤트 객체가 전달된다.

const handleClick = (e) => {
  console.log(e);
};

여기서 e는 이벤트 정보를 담고 있다.

• e.target
• e.target.value

같은 값에 접근할 수 있다.

---

4️⃣ 합성 이벤트 (Synthetic Event)

브라우저마다 이벤트 객체의 구조가 조금씩 다르다. Chrome, Safari 등 각 브라우저의 이벤트 객체가 완전히 동일하지 않다. 이 문제를 Cross Browsing Issue라고 한다.

React는 이를 해결하기 위해 Synthetic Event를 제공한다. 즉, 브라우저마다 다른 이벤트 객체를 React가 하나의 규격으로 통일해 제공하는 것이다. 그래서 React에서는 어떤 브라우저에서도 동일한 방식으로 이벤트를 사용할 수 있다.

 

---

 

5️⃣ React에서 자주 사용하는 이벤트

이 이벤트들은 React에서 기본적으로 제공하는 이벤트 이름이다.

onClick
onChange
onSubmit
onMouseEnter
onMouseLeave
onKeyDown

 

 

---

 

정리

• 이벤트 = 사용자 행동
• 이벤트 핸들러 = 이벤트 발생 시 실행되는 함수
• 함수 호출이 아니라 함수 자체를 전달해야 한다
• React는 Synthetic Event로 브라우저 차이를 해결한다