[javascript] 리액트 프레임워크에서 이벤트 처리 방식은 어떻게 되나요?

05 Dec 2023

javascript

리액트 프레임워크에서 이벤트 처리 방식은 다음과 같이 구현할 수 있습니다:

이벤트 핸들러 함수 설정: 이벤트를 처리하기 위해 이벤트 핸들러 함수를 작성합니다. 이벤트 핸들러 함수는 일반적으로 클래스 컴포넌트의 메서드로 작성됩니다.

class MyComponent extends React.Component {
  handleClick() {
    // 이벤트 처리 로직 작성
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>클릭</button>
    );
  }
}

이벤트 핸들러 설정: 이벤트 핸들러를 컴포넌트의 요소에 연결합니다. 이벤트 핸들러는 props로 전달되며, 일반적으로 이벤트 이름은 on 접두사와 함께 지정됩니다.

class MyComponent extends React.Component {
  handleClick() {
    // 이벤트 처리 로직 작성
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>클릭</button>
    );
  }
}

이벤트 객체 사용: 이벤트 핸들러 함수는 일반적으로 이벤트 객체를 인자로 받아 사용할 수 있습니다. 이벤트 객체에는 이벤트에 관련된 정보가 포함되어 있습니다. 예를 들어, 클릭 이벤트에서는 마우스 좌표 정보 등을 얻을 수 있습니다.

class MyComponent extends React.Component {
  handleClick(event) {
    console.log(event.clientX, event.clientY);
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>클릭</button>
    );
  }
}

리액트 프레임워크에서는 이와 같은 방식으로 이벤트 처리를 구현할 수 있으며, 다양한 종류의 이벤트에 대해 동일한 방식을 적용할 수 있습니다.

참고문서: React - 이벤트 처리하기