React | Event Handling

Event Handling

 리액트에서 이벤트를 처리하는 방식은 DOM에서 처리하는 방식과 몇 가지 문법적 차이를 제외하면 유사하다.

 

1. 리액트의 이벤트는 소문자가 아닌 캐멀 케이스(camelCase)를 사용한다.

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

 

<!-- HTML -->
<button onclick='handleClick()'>click!</button>

 

<!-- React -->
<button onClick={handleClick}>click!</button>

 

3. 리액트에서는 false를 반환해도 태그의 기본 동작을 방지할 수 없으므로 반드시 preventDefault()를 사용해야 한다.

 

<!-- HTML -->
<a href='/' onclick="console.log('click a tag'); return false">click</a>

 

<!-- React -->
<a href="/" onClick={function (e) { e.preventDefalt(); console.log('click a tag');}}>
  click
</a>

 

 여기서 'e'는 합성 이벤트(Syntheic Event)로 네이티브 이벤트를 감싸는 객체이다. 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면 된다.

 

 기본적으로 자바스크립트에서 클래스 메소드는 바인딩이 되어 있지 않으므로 JSX 콜백 안에서의 이벤트는 this를 undifined로 정의하게 된다. 따라서 이벤트를 참조할 경우에는 꼭 바인딩을 해주어야 한다.

 

class Binding extends React.Component {
  constructor(props) {
  	super(props);
    
    this.state = {
      data: binding event
    }
    
    this.handleClick = this.handleClick.bind(this);	// binding!
  }
  
  handleClick () {
  	console.log(this.state.data);	// binding을 해주지 않으면 undefined
  }
  
  render() {
  	return (
      <button onClick={this.handleClick}>click</button>	// 이벤트가 참조되고 있음.
    )
  }
}

 

 아래와 같이 함수 정의하는 문법을 사용하면 바인딩을 해주지 않아도 된다.

 

handleClick = () => {
  console.log(this.state.data);
}