React Event Handling은 React에서 사용자 인터페이스와 상호작용하는 이벤트를 처리하는 방법을 의미합니다. React에서는 브라우저의 DOM 이벤트와 유사한 방식으로 이벤트를 처리하지만, 몇 가지 중요한 차이점과 특징이 있습니다.
주요 특징
- CamelCase 이벤트 이름:
- React에서는 DOM 이벤트 이름과 달리 CamelCase로 이벤트 프로퍼티를 작성합니다.
- 예: onclick 대신 onClick, onmouseover 대신 onMouseOver
- 함수로 이벤트 핸들러 전달:
- 이벤트 핸들러로 함수를 전달하며, 문자열로 전달하지 않습니다.
- 예: <button onClick={handleClick}>Click Me</button>
- SyntheticEvent:
- React는 자체적으로 SyntheticEvent라는 래퍼 이벤트 시스템을 사용합니다.
- 이는 브라우저 간의 호환성을 제공하고 이벤트의 동작을 일관성 있게 유지합니다.
기본 사용법
함수형 컴포넌트에서의 이벤트 핸들링
import React from 'react';
function App() {
const handleClick = () => {
alert('Button clicked!');
};
return (
<button onClick={handleClick}>Click Me</button>
);
}
export default App;클래스형 컴포넌트에서의 이벤트 핸들링
import React, { Component } from 'react';
class App extends Component {
handleClick() {
alert('Button clicked!');
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click Me</button>
);
}
}
export default App;참고: 클래스형 컴포넌트에서는 this 바인딩이 필요합니다. 이를 위해 bind 메서드를 사용하거나, 화살표 함수를 사용하여 메서드를 정의할 수 있습니다.
이벤트 핸들러에 파라미터 전달하기
function App() {
const handleClick = (message) => {
alert(message);
};
return (
<button onClick={() => handleClick('Hello, World!')}>Click Me</button>
);
}이벤트 객체 사용하기
이벤트 핸들러는 자동으로 SyntheticEvent 객체를 파라미터로 받습니다.
function App() {
const handleClick = (event) => {
console.log('Event type:', event.type);
};
return (
<button onClick={handleClick}>Click Me</button>
);
}디폴트 동작 방지하기
이벤트의 디폴트 동작을 방지하려면 event.preventDefault()를 사용합니다.
function App() {
const handleSubmit = (event) => {
event.preventDefault();
alert('Form submitted!');
};
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}이벤트 전파 중단하기
이벤트 전파를 중단하려면 event.stopPropagation()을 사용합니다.
function ParentComponent() {
const handleParentClick = () => {
console.log('Parent clicked');
};
return (
<div onClick={handleParentClick}>
<ChildComponent />
</div>
);
}
function ChildComponent() {
const handleChildClick = (event) => {
event.stopPropagation();
console.log('Child clicked');
};
return (
<button onClick={handleChildClick}>Click Me</button>
);
}위 예제에서 버튼을 클릭하면 'Child clicked'만 출력되고, 부모의 클릭 이벤트는 실행되지 않습니다.
여러 이벤트 유형 처리하기
React는 대부분의 DOM 이벤트를 지원하며, 이벤트 이름은 모두 CamelCase를 사용합니다.
- 마우스 이벤트: onClick, onDoubleClick, onMouseEnter, onMouseLeave 등
- 폼 이벤트: onChange, onSubmit, onFocus, onBlur 등
- 키보드 이벤트: onKeyDown, onKeyPress, onKeyUp 등
이벤트 핸들러 내에서 this 사용하기 (클래스형 컴포넌트)
클래스형 컴포넌트에서 이벤트 핸들러에서 this를 사용하려면 바인딩이 필요합니다.
1. 생성자에서 바인딩하기
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Button clicked', this);
}
render() {
return (
<button onClick={this.handleClick}>Click Me</button>
);
}
}2. 화살표 함수 사용하기
class App extends Component {
handleClick = () => {
console.log('Button clicked', this);
};
render() {
return (
<button onClick={this.handleClick}>Click Me</button>
);
}
}이벤트 핸들러에 추가 파라미터 전달하기 (클래스형 컴포넌트)
class App extends Component {
handleClick(id, event) {
console.log('ID:', id);
console.log('Event type:', event.type);
}
render() {
return (
<button onClick={(event) => this.handleClick(1, event)}>Click Me</button>
);
}
}SyntheticEvent의 특징
- SyntheticEvent는 이벤트 풀링(event pooling)을 사용하여 성능을 최적화합니다. 따라서 이벤트 핸들러에서 이벤트 객체를 비동기로 사용하려면 이벤트 객체를 persist()로 유지해야 합니다.
function App() {
const handleClick = (event) => {
event.persist(); // 이벤트 객체를 유지
setTimeout(() => {
console.log('Event type:', event.type);
}, 1000);
};
return (
<button onClick={handleClick}>Click Me</button>
);
}이벤트 핸들링의 차이점 (HTML vs React)
HTMLReact
| 이벤트 이름 | 소문자 (e.g., onclick) | CamelCase (e.g., onClick) |
| 이벤트 핸들러 전달 | 문자열로 이벤트 핸들러 지정 (e.g., onclick="handleClick()") | 함수로 이벤트 핸들러 전달 (e.g., onClick={handleClick}) |
| 이벤트 객체 | 브라우저의 기본 이벤트 객체 | SyntheticEvent 객체 |
예제: 입력 폼 이벤트 처리
import React, { useState } from 'react';
function App() {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`Submitted value: ${value}`);
};
return (
<form onSubmit={handleSubmit}>
<label>
Input:
<input type="text" value={value} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default App;요약
- React의 이벤트 핸들링은 DOM 이벤트와 유사하지만, CamelCase 이벤트 이름과 함수로 이벤트 핸들러를 전달하는 점이 다릅니다.
- 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 이벤트를 처리할 수 있으며, 각 방식에 따라 this 바인딩에 주의해야 합니다.
- SyntheticEvent를 통해 브라우저 간의 이벤트 호환성을 유지하며, 필요한 경우 event.persist()를 사용하여 이벤트 객체를 유지할 수 있습니다.
- 다양한 이벤트와 그 사용법을 숙지하면 React에서 사용자 상호작용을 효과적으로 처리할 수 있습니다.
참고 자료: