이벤트는 에서 대화식의 동적 사용자 인터페이스를 만드는 데 중요한 역할을 합니다 React. React 이 자습서에서는 이벤트를 처리 하고 사용자 작업에 효과적으로 응답하는 방법을 살펴봅니다 .
JSX의 이벤트 처리
React 기본 브라우저 이벤트를 래핑하고 여러 브라우저에서 정규화하는 합성 이벤트 시스템을 제공합니다. 속성 을 사용하여 이벤트 핸들러를 JSX 요소에 직접 연결할 수 있습니다 onEventName.
예:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
이벤트 핸들러 및 이벤트 객체
이벤트가 발생하면 React 자동으로 이벤트 핸들러 함수에 이벤트 객체를 전달합니다. 대상 요소, 마우스 좌표 등과 같은 이벤트에 대한 추가 정보를 얻기 위해 이 개체에 액세스할 수 있습니다.
예:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
바인딩 이벤트 핸들러
이벤트 핸들러를 소품으로 전달할 때 구성 요소 인스턴스에 바인딩하는 것이 중요합니다. this 이렇게 하면 이벤트가 트리거될 때 올바른 컨텍스트가 유지됩니다.
예:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
이벤트 전파 및 기본 동작 방지
React 이벤트 전파를 자동으로 처리하는 합성 이벤트 시스템을 사용합니다. 양식 제출 또는 링크 탐색과 같은 기본 브라우저 동작을 방지하기 위해 메서드를 호출할 수 있습니다 event.preventDefault().
예:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>에서 이벤트를 처리하는 방법을 이해하면 React 사용자 작업에 원활하게 응답하는 대화형 응답형 사용자 인터페이스를 만들 수 있습니다.
다음은 일반적인 이벤트 목록입니다. React
1. onClick: 요소를 클릭했을 때 발생하는 이벤트입니다.
예:
<button onClick={handleClick}>Click Here</button> 2. onChange: 입력 요소(input, select, textarea)의 값이 변경될 때 발생하는 이벤트입니다.
예:
<input type="text" onChange={handleChange} /> 3. onSubmit: 폼 제출 시 발생하는 이벤트입니다. 예:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: 요소에 마우스 포인터가 들어갈 때 발생하는 이벤트입니다.
예:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: 마우스 포인터가 요소를 벗어날 때 발생하는 이벤트입니다.
예:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: 키를 눌렀을 때 발생하는 이벤트입니다.
예:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: 키를 놓았을 때 발생하는 이벤트입니다.
예:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: 해당 요소가 포커스를 받았을 때 발생하는 이벤트입니다.
예:
<input type="text" onFocus={handleFocus} /> 9. onBlur: 요소가 포커스를 잃었을 때 발생하는 이벤트입니다.
예:
<input type="text" onBlur={handleBlur} /> 10. onScroll: 요소가 스크롤될 때 발생하는 이벤트입니다.
예:
<div onScroll={handleScroll}>Scrollable Content</div>
이들은 에서 일반적인 이벤트의 몇 가지 예일 뿐입니다 React. 애플리케이션 의 필요에 따라 이러한 이벤트를 사용하거나 사용자 지정 이벤트를 만들 수 있습니다 React.