- HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.
- JSX 에 이벤트를 설정 할 수 있습니다.
class Comp extends React.Component {
render(){
return (
<div>
<button onClick={() => {
console.log('clicked');
}}>클릭!</button>
</div>
);
}
}
Event Handling
- camelCase 로만 사용할 수 있음
- 이벤트에 연결된 자바스크립트 코드는 함수임
- 실제 DOM 요소들에만 사용 가능함
- 리액트 컴포넌트에 사용하면 그냥, props로 전달
<script type="text/babel">
console.log(React);
console.log(ReactDOM);
class Component extends React.Component {
state = {count: 0}
render(){
return(
<div>
<p>{this.state.count}</p>
<button onClick={this.click}>클릭</button>
</div>
);
}
click = () => {
this.setState((state)=>({
...state,
count: state.count + 1
}));
}
}
ReactDOM.render(<Component/>, document.querySelector('#root'))
</script>