React
react Event Handling
ahleum
2022. 1. 14. 12:31
- HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.
- JSX 에 이벤트를 설정할 수 있습니다.
class Comp extends React.Component {
render() {
return (
<div>
<button onClick={() => {
console.log('clicked');
}}>클릭</button>
</div>
);
}
}
Event Handling
- camelCase 로만 사용할 수 있습니다.
- onClick, onMouseEnter
- 이벤트에 연결된 자바스크립트 코드는 함수입니다.
- 이벤트={함수} 와 같이 씁니다.
- 실제 DOM 요소들에만 사용 가능합니다.
- 리액트 컴포넌트에 사용하면, 그냥 props 로 전달합니다.
<script type="text/babel">
console.log(React);
console.log(ReactDOM);
// function Component(){
// return(
// <div>
// <button onClick={()=>{
// console.log("clicked");
// }}>클릭
// </button></div>
// );
// }
class Component extends React.Component{
state={
count:0,
};
render(){
return(
<div>
<p>{this.state.count}</p>
<button onClick={()=>{
console.log("clicked");
this.setState((state)=>({
...state,
count:state.count+1,
}));
// ...state 위 state={count:0}을 풀어서 복사해주는것
}}
>
클릭
</button>
</div>
);
}
}
ReactDOM.render(<Component />, document.querySelector('#root'))
</script>
onClick 부분을 별도의 메소드로 분리하는 작업 ↓
class Component extends React.Component{
state={
count:0,
};
render(){
return(
<div>
<p>{this.state.count}</p>
<button onClick={this.click}>클릭</button>
</div>
);
}
//click(){} 형식으로 쓰면 this가 제대로 바인드 되지 않아 오류가 뜨면서 실행이 되지 않는다.
click=()=>{
console.log("clicked");
this.setState((state)=>({
...state,
count:state.count+1,
}));
}
}
ReactDOM.render(<Component />, document.querySelector('#root'))