์ด๋ฒคํธ: ์ ์ ๊ฐ ์น ๋ธ๋ผ์ฐ์ ์์ DOM ์์๋ค๊ณผ ์ํธ ์์ฉํ๋ ๊ฒ
์) ๋ฒํผ์ ๋ง์ฐ์ค ์ปค์๋ฅผ ์ฌ๋ ธ์ ๋ onmouseover์ด๋ฒคํธ๋ฅผ ์คํํ๊ฑฐ๋, ํด๋ฆญํ๋ฉด onclick์ด๋ฒคํธ๋ฅผ ์คํํ๋ ์ด๋ฒคํธ
๋ฆฌ์กํธ์ ์ด๋ฒคํธ๋ HTML์ ์ด๋ฒคํธ์ ๋น์ทํ๋ค
HTML์์ ์ด๋ฒคํธ๋ ์ด๋ ๊ฒ ๊ตฌํํ๋ค
HTML ์คํ: https://jsbin.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button onclick="alert('executed')">click me</button>
</body>
</html>
๋ฆฌ์กํธ ์ด๋ฒคํธ ์์คํ
์ ๋ฒ์ ํ๋ ๋ฒํผ ์ฝ๋
<button onClick={()=>{
this.setState({
number: this.state.number+1
})
}
}>๋ํ๊ธฐ</button>๋น์ทํ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ณ ์๋ค
์ฃผ์ ์ฌํญ๋ง ๋ช ๊ฐ์ง ์งํค๋ฉด ๋๋ค
์ด๋ฒคํธ ์ฌ์ฉ ์ ์ฃผ์ ์ฌํญ
1. ์ด๋ฒคํธ ์ด๋ฆ์ came|Case๋ก ์์ฑ
์๋ฅผ ๋ค์ด HTML์ onclick์ ๋ฆฌ์กํธ์์๋ onClick์ผ๋ก ์์ฑํด์ผ ํ๋ค
2. ์ด๋ฒคํธ์ ์คํํ ํจ์ ํํ์ ๊ฐ์ ์ ๋ฌ
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ ๋ฌx ํจ์ ํํ์ ๊ฐ์ ์ ๋ฌํ๋ค
ํ์ดํ ํจ์ ๋ฌธ๋ฒ์ผ๋ก ์ ๋ฌํ๋๊ฐ, ๋ ๋๋ง ๋ถ๋ถ ์ธ๋ถ์ ๋ฏธ๋ฆฌ ๋ง๋ค์ด์ ์ ๋ฌํด์ผ ํ๋ค
3. DOM ์์์๋ง ์ด๋ฒคํธ๋ฅผ ์ค์
div, button, input ๋ฑ์ DOM์์์๋ ์ด๋ฒคํธ ์ค์ ์ ํ ์ ์์ง๋ง,
์ง์ ๋ง๋ ์ปดํฌ๋ํธ์๋ ์ด๋ฒคํธ๋ฅผ ์์ฒด์ ์ผ๋ก ์ค์ ํ ์ ์๋ค
์๋ฅผ ๋ค์ด MyComponent์ onClick ์ด๋ฒคํธ๋ฅผ ์ค์ ํ๋ค๋ฉด MyComponent๋ฅผ ํด๋ฆญํ ๋ doSomethingํจ์๋ฅผ ์คํํ์ง ์๋๋ค
๊ทธ๋ฅ ์ด๋ฆ์ด onClick์ธ props๋ฅผ ์ ๋ฌ๋ฐ๋๋ค
<MyComponent onClick={doSomething} />
๋ฐ๋ผ์ ์์ฒด์ ์ผ๋ก ์ด๋ฒคํธ๋ฅผ ์ค์ ํ ์๋ ์๋ค
์ ๋ฌ๋ฐ์ props๋ฅผ ์ปดํฌ๋ํธ ๋ด๋ถ DOM์ด๋ฒคํธ๋ก ์ค์ ์ ๊ฐ๋ฅํ๋ค
<div onClick={this.props.onClick}>{}</div>
์ด๋ฒคํธ ์ข ๋ฅ
Touch, Form, UI, Media ๋ฑ๋ฑ..
๋ฆฌ์กํธ ๋งค๋ด์ผ ์ฐธ๊ณ https://reactjs.org/docs/events.html
์ด๋ฒคํธ ํธ๋ค๋ง ์์
1. ์ปดํฌ๋ํธ ์์ฑ
src๋๋ ํ ๋ฆฌ์ EventPractice.js ํ์ผ ์์ฑ
import React, { Component } from 'react';
class EventPractice extends Component {
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
</div>
);
}
}
export default EventPractice;
2. App.js์์ EventPractice ๋ถ๋ฌ์ค๊ธฐ
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import EventPractice from './EventPractice';
class MyComponent extends Component {
render() {
return (
<EventPractice/>
);
}
}
export default MyComponent;
3. onChange ์ด๋ฒคํธ ํธ๋ค๋ง
์ด์ input์์๋ฅผ ๋ ๋๋งํด์ onChange์ด๋ฒคํธ๋ฅผ ์ค์ ํ ๊ฒ
import React, { Component } from 'react';
class EventPractice extends Component {
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํด๋ณด์ธ์"
onChange={
(e)=>{
console.log(e.target.value);
}
}
/>
</div>
);
}
}
export default EventPractice;EventPractice.js์ ์ด๋ ๊ฒ ์์ ํด์ค๋ค
์ฌ๊ธฐ์ ๋์ด๊ฐ๋ e๊ฐ์ฒด๋ SyntheticEvent๋ก ์น ๋ธ๋ผ์ฐ์ ์ ๋ค์ดํฐ๋ธ ์ด๋ฒคํธ๋ฅผ ๊ฐ์ธ๋ ๊ฐ์ฒด์ด๋ค
๊ฐ์ด ๋ฐ๋ ๋๋ง๋ค ๋ฐ๋๋ ๊ฐ์ด ์ฝ์์ ๊ธฐ๋ก๋๋ค
4. state์ input๊ฐ ๋ด๊ธฐ
์ ์ ํด๋ดค๋ ์์ฑ์ ๋ฉ์๋ constructor์์ state์ด๊น๊ฐ ์ค์ , setState๋ก ์ ๋ฐ์ดํธํ๋ค
import React, { Component } from 'react';
class EventPractice extends Component {
state={
message: ''
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํด๋ณด์ธ์"
value={this.state.message}
onChange={
(e)=>{
this.setState({
message: e.target.value
})
}
}
/>
</div>
);
}
}
export default EventPractice;์ด์ ์ ๋ ฅ๋ฐ์ค์ ๋ฉ์์ง๋ฅผ ์ ์ ๋ ฅํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค
5. ๋ฒํผ์ ๋๋ฅผ ๋ comment ๊ฐ์ ๊ณต๋ฐฑ์ผ๋ก ๋ฐ๊พธ๊ธฐ
๋ฒํผ์ ๋๋ฅด๋ฉด ๋ฉ์์ง๋ฅผ ํ๋ฉด์ ํ์ํ๊ณ comment๊ฐ์ ์ด๊ธฐํํ๋ค
import React, { Component } from 'react';
class EventPractice extends Component {
state={
message: ''
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํด๋ณด์ธ์"
value={this.state.message}
onChange={
(e)=>{
this.setState({
message: e.target.value
})
}
}
/>
<button onClick={
()=>{
alert(this.state.message);
this.setState({
message: ''
});
}
}>ํ์ธ</button>
</div>
);
}
}
export default EventPractice;
6. ์์ ๋ฉ์๋ ๋ง๋ค๊ธฐ
์๊น ์ฃผ์ ์ฌํญ์์ '์ด๋ฒคํธ์ ์คํํ ์๋ฐ ์คํฌ๋ฆฝํธ๊ฐ ์๋๋ผ ํจ์ ํํ์ ๊ฐ์ ์ ๋ฌํ๋ค'๋ผ๊ณ ํ๋๋ฐ,
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ ๋ ๋ ๋๋ง์ ํ๋ ๋์์ ํจ์๋ฅผ ๋ง๋ค์ด์ ์ ๋ฌํ๋ค
๊ทธ๋ฆฌ๊ณ ์ด๋ฐ ๋ฐฉ๋ฒ ๋์ ํจ์๋ฅผ ๋ฏธ๋ฆฌ ์ค๋นํด์ ์ ๋ฌํ๋ ๋ฐฉ๋ฒ๋ ์์
์๋๋ ๊ธฐ๋ณธ ๋ฐฉ์
import React, { Component } from 'react';
class EventPractice extends Component {
state={
message: ''
}
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e){
this.setState({
message: e.target.value
});
}
handleClick(e){
this.setState({
message: ''
});
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํด๋ณด์ธ์"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>ํ์ธ</button>
</div>
);
}
}
export default EventPractice;์ปดํฌ๋ํธ์ ์์ ๋ฉ์๋๋ฅผ ๋ง๋ค๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก๋ this์ ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์
์ปดํฌ๋ํธ์ ์์ฑ์ ๋ฉ์๋์ธ constructor์์ ๊ฐ ๋ฉ์๋๋ฅด๋ฅด this์ ๋ฐ์ธ๋ฉ ํด ์ฃผ์๋ค
๋ฐ์ธ๋bind๋ ๋ฌถ๋๋ค๋ ๋ป์ด๋๊น, ๋ฉ์๋์์ this๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๋ฉ์๋์ this๋ฅผ ๋ฌถ์ด์ค๋ค๋ ์๋ฏธ๋ค
์ด ์์ ์ ํด์ฃผ์ง ์์ผ๋ฉด ๋ฉ์๋์์ this๋ฅผ ๋ถ๋ฅผ ๋ undefined๊ฐ ๋ฆฌํด๋๋ค
7. Property Initializer Syntax๋ฅผ ์ฌ์ฉํ ๋ฉ์๋ ์์ฑ
๋ฉ์๋ ๋ฐ์ธ๋ฉ์ ์์ฑ์ ๋ฉ์๋์์ ํ๋ ๊ฒ์ด ์ ์์ธ๋ฐ, ์ ๋ฉ์๋๋ฅผ ๋ง๋ค ๋๋ง๋ค constructor์ ์์ ํด์ค์ผ ํด์ ๋ถํธํ๋ค
์ด ์์ ์ ๊ฐ๋จํ๊ฒ ํด ์ฃผ๋ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก ๋ฐ๋ฒจ์ transform-class-properties๋ฌธ๋ฒ์ผ๋ก ํ์ดํ ํจ์ ํํ๋ก ์ ์ํ๋ ๊ฒ
import React, { Component } from 'react';
class EventPractice extends Component {
state={
message: ''
}
handleChange = (e) => {
this.setState({
message: e.target.value
});
}
handleClick = (e) => {
alert(this.state.message);
this.setState({
message: ''
});
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํด๋ณด์ธ์"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>ํ์ธ</button>
</div>
);
}
}
export default EventPractice;constructor๊ฐ ์ฌ๋ผ์ง๊ณ ํ์ดํ ํจ์ ํํ๊ฐ ๋์๋ค
8. input ์ฌ๋ฌ ๊ฐ๋ฅผ ํธ๋ค๋ง
event๊ฐ์ฒด๋ฅผ ํ์ฉํ๋ฉด ์ฌ๋ฌ ๊ฐ์ input ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค
import React, { Component } from 'react';
class EventPractice extends Component {
state={
username: '',
message: ''
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick = (e) => {
alert(this.state.username+':'+this.state.message);
this.setState({
username: '',
message: ''
});
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="username"
placeholder="์ ์ ๋ช
"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํ์ธ์"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>ํ์ธ</button>
</div>
);
}
}
export default EventPractice;
[e.target.name]: e.target.value ์ด ๋ถ๋ถ์์ []๋
[]์์ ์๋ ๊ฐ์ key๊ฐ์ผ๋ก ์ฌ์ฉํ๋ค๋ ์๋ฏธ๋ก ์ฐ์ธ๋ค
๊ดํธ๊ฐ ์์ผ๋ฉด ์๋ฌ๊ฐ ๋๋ ์ฃผ์ํ๋ค
9. onKeyPress ์ด๋ฒคํธ ํธ๋ค๋ง
ํค๋ฅผ ๋๋ ์ ๋ ๋ฐ์ํ๋ KeyPress์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ค
comment์ธํ์์ ์ํฐ๋ฅผ ๋๋ ์ ๋ handleClick๋ฉ์๋๋ฅผ ํธ์ถํ๋ค
import React, { Component } from 'react';
class EventPractice extends Component {
state={
username: '',
message: ''
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick = (e) => {
alert(this.state.username+':'+this.state.message);
this.setState({
username: '',
message: ''
});
}
handleKeyPress=(e)=>{
if(e.key == 'Enter'){
this.handleClick();
}
}
render() {
return (
<div>
<h1>์ด๋ฒคํธ ์ฐ์ต</h1>
<input
type="text"
name="username"
placeholder="์ ์ ๋ช
"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="์๋ฌด๊ฑฐ๋ ์
๋ ฅํ์ธ์"
value={this.state.message}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
<button onClick={this.handleClick}>ํ์ธ</button>
</div>
);
}
}
export default EventPractice;์ด์ ๊ฐ์ ์ ๋ ฅํ๊ณ ์ํฐ๋ฅผ ๋๋ฅด๋ฉด ๋ฐ๋ก ๋ฉ์์ง์ฐฝ์ด ๋ฌ๋ค
์ฐธ๊ณ ํ ์ฑ : ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์
'Frontend๐ฑ > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [React] ๋ฆฌ์กํธ State๋? (0) | 2023.04.20 |
|---|---|
| [React] ๋ฆฌ์กํธ์์ ์ด๋ฒคํธ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ๋ฒ (0) | 2023.04.20 |
| [๋ฆฌ์กํธ] Router ํ์ด์ง ์ด๋์ ๋ํด์ ๋ค์ด๋ณธ ์ ์๋..? (0) | 2023.04.18 |
| [๊ฟํ] ๊ถ๊ธํ๊ฒ ์์ด์.. ํ์ดํ ํจ์๊ฐ ๋๋์ฒด ๋ญ์์...???!๐ (2) | 2023.04.18 |
| [๋ฆฌ์กํธ] React์ Spring์ผ๋ก ๋ก๊ทธ์ธ ํ๋ฉด ๋ง๋ค์ด๋ณด๊ธฐ (0) | 2023.04.18 |
