<!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')">클릭 </button>
</body>
</html>html 파일에서 onclick 이벤트를 사용할 때
" " 사이에 자바스크립트를 실행하도록 코드를 작성한다.
리엑트에서의 이벤트도 비슷하지만 조금 차이가 있다.
const Say = () => {
const [message , setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요');
const onClickLeave = () => setMessage('안녕히 가세요!');
const [color, setColor] = useState('black');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={ {color}}>{message}</h1>
<button onClick={ () => setColor('red')}>빨간색</button>
<button onClick={ () => setColor('green')}>초록색</button>
<button onClick={ () => setColor('blue')}>파란색</button>
</div>
);
};
리엑트에서의 이벤트 사용
- 이벤트 이름은 카멜 표기법으로 사용
: HTML의 onclick은 리엑트에서 onClick 이다
- 이벤트에 실행할 자바스크립트 코드 대신 함수 형태의 값을 전달한다.
: HTML은 큰 따옴표 안테 실행할 코드를 넣었지만, 리엑트는 함수 형태의 객체를 전달한다.
화살표 함수 문법으로 함수를 만들어도 되고 랜더링 외부에 미리 만들어서 전달해도 된다.
화살표 함수
class EventPractice extends Component {
state = {
message: ''
}
render(){
const {message} = this.state;
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value= {message}
onChange={
(e) => this.setState({
message: e.target.value
})
}
/>
<button onClick= {
() => {
alert(message);
this.setState({
message:''
});
}
}>확인</button>
</div>
);
}
};
랜더링 외부 함수
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(){
alert(this.state.message);
this.setState({
message:''
});
}
render(){
const {message} = this.state;
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value= {message}
onChange={this.handleChange}
/>
<button onClick= {this.handleClick}>확인</button>
</div>
);
}
};
※ 함수가 호출 될 때 this는 호출 부에 따라 결정 되므로,
클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서
메서드와 this의 관계가 끊어져 버린다.
이 때문에 임의 메서드가 이벤트로 등록되어도
this를 컴포넌트 자신으로 제대로 가리키기 위해서는
메서드를 this와 바인딩 하는 작업이 필요하다
만약 바인딩 하지 않으면 this가 undefined를 가리키게 된다
constructor 함수에서 함수를 바인딩 하는 작업을 한다.
Property Initializer Syntax 메서드
※메서드 바인딩은 생성자 메서드에서 하는 것이 정석이다.
하지만 이 작업은 불편하다. 새 메서드를 만들 때 마다 constuctor도 수정해야 하기 때문이다.
이때 바벨의 transform-class-properties 문법을 사용하여
화살표 함수 형태로 메서드를 정의 하면 편리하다.
class EventPractice extends Component {
state = {
message: ''
}
handleChange =(e) =>{
this.setState({
message: e.target.value
});
}
handleClick = () =>{
alert(this.state.message);
this.setState({
message:''
});
}
render(){
const {message} = this.state;
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value= {message}
onChange={this.handleChange}
/>
<button onClick= {this.handleClick}>확인</button>
</div>
);
}
};
export default EventPractice;
- DOM 요소에만 이벤트를 설정할 수 있다.
: div , button , input , form , span 등 DOM 요소에는 이벤트를 설정 할 수 있지만
우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없다.
'react' 카테고리의 다른 글
| JSX 문법 (0) | 2020.12.08 |
|---|---|
| e.target 활용하기 (0) | 2020.12.07 |
| 함수형 컴포넌트 useState 사용 (0) | 2020.12.07 |
| state , useState 사용하기 (0) | 2020.12.07 |
| 클래스형 컴포넌트 (0) | 2020.12.07 |