React 이벤트 사용 및 bind 함수

React에서 이벤트를 사용하고 이벤트의 기본 동작(예: 페이지 리로드)을 막으려면 이벤트 핸들러 함수를 정의하고, 해당 함수 내에서 `e.preventDefault()`를 호출하여 기본 동작을 막을 수 있습니다. 또한, 클래스 컴포넌트에서 함수를 사용할 때 `this` 바인딩에 대해 주의해야 합니다. 아래에서 React에서 이벤트 사용 및 `bind` 함수 사용하는 방법을 설명하겠습니다.

1. 이벤트 핸들러 함수 정의

이벤트 핸들러 함수는 원하는 작업을 수행하는 함수입니다. 예를 들어, 클릭 이벤트를 처리하려면 `onClick` 이벤트 핸들러 함수를 정의해야 합니다.

2. `e.preventDefault()` 호출

이벤트 핸들러 함수 내에서 `e.preventDefault()`를 호출하여 이벤트의 기본 동작을 막을 수 있습니다. 이것은 주로 링크 클릭 시 페이지 리로드를 방지하는 데 사용됩니다.

3. `bind` 함수 사용

클래스 컴포넌트에서 이벤트 핸들러 함수를 사용할 때, 함수 내에서 `this`를 올바르게 참조하기 위해 `bind` 함수를 사용해야 합니다.

아래는 React 클래스 컴포넌트에서 이벤트 핸들러 함수를 사용하는 예제 코드와 주석입니다.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: 'initial',
    };

    // 이벤트 핸들러 함수에 대한 this 바인딩
    this.handleClick = this.handleClick.bind(this);
  }

  // 클릭 이벤트 핸들러 함수
  handleClick(e) {
    e.preventDefault(); // 기본 동작(페이지 리로드) 막기

    // this.state 업데이트
    this.setState({
      mode: 'updated',
    });
  }

  render() {
    return (
      <div>
        <h1>
          {/* 클릭 이벤트 핸들러 함수를 onClick 이벤트에 연결 */}
          <a href="/" onClick={this.handleClick}>
            {this.state.mode === 'initial' ? 'Click me' : 'Clicked!'}
          </a>
        </h1>
      </div>
    );
  }
}

export default MyComponent;

위의 코드에서 `handleClick` 함수는 클릭 이벤트를 처리하고, `this.handleClick`를 `onClick` 이벤트에 연결하여 클릭 시 페이지 리로드를 막고 `this.state.mode`를 업데이트합니다. `this.handleClick` 내에서 `e.preventDefault()`를 호출하여 기본 동작을 막았습니다. 이렇게 하면 리액트 컴포넌트에서 이벤트를 처리하고 이벤트의 기본 동작을 막을 수 있습니다.

 

 

참고영상 : https://www.inflearn.com/course/lecture?courseSlug=react-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9&unitId=20331&tab=curriculum