Skip to content

5. Event

JY_Jeong edited this page Dec 1, 2016 · 12 revisions

React에서 이벤트를 사용하는 방법에 대해 알아보겠습니다.
아래는 하나의 구성 요소 만 사용하는 단순한 예제 소스코드입니다.
버튼을 클릭하면 updateState 함수를 트리거하는 onClick 이벤트를 추가하는 예제입니다.

``` import React from 'react';

class App extends React.Component {

constructor(props) { super(props);

  this.state = {
     data: 'Initial data...'
  }

  this.updateState = this.updateState.bind(this);

};

updateState() { this.setState({data: 'Data updated...'}) }

render() { return (

CLICK

{this.state.data}

); } }

export default App;

<br>
위의 소스코드를 간단하게 풀이하자면, <b>updateState()</b> 라는 함수를 선언하여
<br>
<b>render()</b> 함수 내에서 button 컴포넌트에 html에서 제공되는 이벤트 리스너를 카멜표기법(camelCase)로 
<br>
현재 컴포넌트에 선언한 함수명을 명시한 예제입니다.
<br>
버튼 클릭 시, <b>updateState()</b> 함수를 수행하게 됩니다.

Clone this wiki locally