Handling Events(이벤트 처리하기) in React(리액트)

확실한 정보전달을 위하여 codesandbox.io에서 실습할 예정이다.

reactjs.org/docs/handling-events.html의 내용을 바탕으로 재정리한다.

이하 자바스크립트는 Js라고 명칭 한다.

React의 요소로 이벤트를 처리하는것은 DOM과 유사하지만, 몇가지 구문 차이가 있다.

- 소문자가 아닌 camelCase를 사용한다.

- JSX를 이용하여 "문자열"이 아닌 이벤트 핸들러로 함수를 전달한다.

 

<button onclick = "click()">버튼</button>  //HTML Version

<button onclick = {click}>버튼</button> // React  Version

 

또 다른 차이점은 React에서 기본 동작을 방지하기 위해 false를 반환 할 수 없다

preventDefault를 명시적으로 호출해야한다.

<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a> 

새 페이지를 여는 기본 링크 동작을 방지하는 방법_HTML

import React from "react";

export default function App() {
  return (
    <div className="App">
      <ActionLink />
    </div>
  );
}

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

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

새 페이지를 여는 기본 링크 동작을 방지하는 방법_React

 

토글버튼으로 알아보는 이벤트 처리

import React from "react";

export default function App() {
  return (
    <div className="App">
      <Toggle />
    </div>
  );
}

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

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
  //state를 바꿔주는 함수

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

this를 construction안에 binding하고싶지 않다면 arrow function을 이용하거나,

이벤트처리하는 곳에 바로 bind처리해주면 된다.

 

출처 : reactjs.org/docs/handling-events.html