React
[React 기초 문법] #4 event handling(이벤트 핸들링)
bmanerdaniel
2021. 6. 14. 23:51
반응형
이벤트란?
사용자가 웹에서 DOM 요소들과 상호 작용하는 것을 event라고 한다.
사용법은 HTML에서 이벤트를 작성한것과 유사하나 몇가지 차이점이 있다.
이벤트 이름은 카멜케이스로 작성함.
DOM요소에만 이벤트를 설정할 수 있음.(component에 직접적으로 이벤트를 설정 할 수 없음.)
자주 쓰는 이벤트 핸들링(input tag와 onChange)
클래스형 component ver.
import React, { Component } from "react";
class App extends Component {
state = {
name: "",
};
render() {
return (
<input
type="text"
name="name"
placeholder="your name"
value={this.state.name}
onChange={(e) => {
this.setState({
name: e.target.value,
});
}}
/>
);
}
}
export default App;
함수형 component ver.
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<input
type="text"
name="name"
placeholder="your name"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
/>
);
}
export default App;
자주 쓰는 이벤트 핸들링(input tag/button tag와 onKeyPress)
클래스형 component ver.
import React, { Component } from "react";
class App extends Component {
state = {
name: "",
};
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
};
handleClick = () => {
alert(this.state.name);
this.setState({
name: "",
});
};
handleKeyPress = (e) => {
if (e.key === "Enter") {
this.handleClick();
}
};
render() {
return (
<>
<input
type="text"
name="name"
placeholder="your name"
value={this.state.name}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
<button onClick={this.handleClick}>click</button>
</>
);
}
}
export default App;
반응형