close

이벤트 처리 React- 이벤트 처리에 대한 포괄적인 가이드 React .js

이벤트는 에서 대화식의 동적 사용자 인터페이스를 만드는 데 중요한 역할을 합니다 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.