확실한 정보전달을 위하여 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
'Software Engineering' 카테고리의 다른 글
Lists and Keys in 리액트(React) (0) | 2020.11.25 |
---|---|
Conditional Rendering(조건부 랜더링) in React(리액트) (0) | 2020.11.24 |
State and Lifecycle in React(리액트) (0) | 2020.11.22 |
Components and Props in React(리액트) (0) | 2020.11.20 |
Rendering Elements in React(리액트) (0) | 2020.11.19 |