[React] 이벤트 처리

목차

이벤트 처리: React에서의 사용자 상호작용 강화하기 🔨🚀

안녕하세요, React에 관심 있는 웹 개발자 여러분! 사용자의 클릭, 입력, 스크롤과 같은 행위에 반응하는 것은 모던 웹 애플리케이션에서 필수적입니다. React에서의 이벤트 처리는 웹 애플리케이션에 다채로운 상호작용을 추가하고, 사용자 경험을 향상시키는 강력한 방법을 제공합니다. 이 포스트에서는 React의 이벤트 처리 시스템에 대해 알아보고, 사용자 상호작용을 구현하는 기본 방법을 탐색해보겠습니다.

---

React 이벤트 처리의 기본

React의 이벤트 처리는 전통적인 HTML의 이벤트 처리와 유사하지만, 몇 가지 차이점이 있습니다. React에서 이벤트 핸들러는 camelCase로 작성되며, 문자열이 아닌 함수를 이벤트 핸들러로 전달합니다.

클릭 이벤트 처리

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

위 예제에서 handleClick 함수는 클릭 이벤트를 처리합니다. e.preventDefault()는 기본 동작을 중단시킵니다.

 

이벤트 핸들링과 this 바인딩

클래스 컴포넌트에서 이벤트 핸들러를 사용할 때, 메서드가 정확한 this 컨텍스트를 참조하도록 하기 위해 메서드를 컴포넌트 인스턴스에 바인딩하는 것이 중요합니다. 이를 위해 생성자에서 this를 바인딩하거나, 클래스 필드 문법을 사용하여 화살표 함수를 활용할 수 있습니다.

this 바인딩

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 이 바인딩은 콜백에서 `this`가 작동하게 만듭니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

 

이벤트 핸들링에서의 화살표 함수

함수 컴포넌트에서 혹은 클래스 컴포넌트의 이벤트 핸들러에서 this 바인딩 문제를 해결하기 위해 화살표 함수를 사용할 수도 있습니다.

<button onClick={(e) => this.handleClick(e)}>
  Click me
</button>

 

이벤트 핸들러에 인자 전달하기

이벤트 핸들러에 추가적인 인자를 전달할 수도 있습니다. 이는 화살표 함수나 Function.prototype.bind를 사용하여 구현할 수 있습니다.

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

 

마무리하며...

React에서의 이벤트 처리는 애플리케이션에 다양한 상호작용을 추가하고 사용자 경험을 향상시키는 훌륭한 방법입니다. 이벤트 핸들링의 기본 원칙을 이해하고, 적절한 this 바인딩 방법을 선택함으로써, 보다 풍부한 기능을 가진 애플리케이션을 구현할 수 있습니다. 사용자의 행동에 반응하는 다이내믹한 웹 페이지를 만들어 보세요!

---

Reference:

 

Handling Events – React

State and Lifecycle – React