목차
events 사용 events 추가 구문 events handler (이벤트 핸들러) this 키워드로 묶기 인수 (= 독립변수) 전달 React event object (리액트 이벤트 객체)
events 사용
1.
React는 HTML과 마찬가지로 사용자 이벤트 기반 작업 수행 가능 .
2.
React는 HTML과 동일한 이벤트 갖음.
(예) click, change, mouseover 등.
단,
이벤트 추가 구문은 2가지 점이 다름 .
events 추가 구문
1. React 이벤트는 낙타 문자 방식 으로 표기.
(예) onClick (O) , onclick (X)
2. React 이벤트 핸들러는 중괄호인 { } 안에 표기.
(예) onClick={hz} (O) , onClick="hz()" (X)
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
function hz() {
alert("홈짱닷컴 Homzzang.com");
}
const btn = (
<button onClick={hz} >클릭</button>
);
ReactDOM.render(btn, document.getElementById('root'));
ps. HTML 경우 표기법.
<button onclick="shoot()" >클릭</button>
events handler (이벤트 핸들러)
위 예제처럼 이벤트 핸들러를 별도로 분리하는 것보다 ,
이벤트 핸들러를 컴포넌트 클래스의 메서드로 배치 권장.
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz() {
alert("홈짱닷컴 Homzzang.com");
}
render() {
return (
<button onClick={this.hz} >클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
this 키워드로 묶기
※ 메서드 정의하는 함수 방식에 따라 this 키워드 묶는 법이 다름.
[예제1] - 화살표 함수 경우
React에서 메서드 경우, this 키워드는 메서드를 소유한 컴포넌트 나타내야 해서, this 키워드가 항상 화살표 함수 정의한 객체를 의미 .
[예제2] - 일반함수 경우
this 키워드는 전역 window 객체나 HTML 버튼, 또는 그 어떤 것이든 될 수 있어 bind() 메서드 사용 해 this를 컴포넌트 인스턴스에 묶음.
[예제1] - 화살표 함수 경우
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz = () => {
alert(this); // this 키워드는 컴포넌트 객체 의미.
}
render() {
return (
<button onClick={this.hz} >클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
결과값: object Object
[예제2] - 일반함수 경우
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
constructor(props) {
super(props)
this.hz = this.hz.bind(this)
}
hz() {
alert(this); // constructor() 함수 안의 bind() 덕분에 this는 컴포넌트 객체 의미.
}
render() {
return (
<button onClick={this.hz} >클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
결과값: object Object
※ 주의: 만약, bind() 없으면, this 키워드는 undefined 반환.
인수 (= 독립변수) 전달
※ 2가지 방법으로 인수 전달 가능.
[방법1] 익명 화살표함수로 인수 전달
[방법2] 일반함수로 인수 전달
[방법1] 익명 화살표함수로 인수 전달
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz = (a) => {
alert(a);
}
render() {
return (
<button onClick={() => this.hz("홈짱닷컴 Homzzang.com") }>클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
[방법2] 일반함수로 인수 전달
※ 이 경우, 이벤트 핸들러를 this 키워드에 묶기.
※ 이 경우, 첫 번째 인수는 반드시 this 사용.
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz(a) {
alert(a);
}
render() {
return (
<button
onClick={this.hz.bind(this, "홈짱닷컴 Homzzang.com")}
>클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
PS. 주의사항
bind() 메서드 사용 않고 인수를 전송 (예제: this.shoot.bind (this, "홈짱닷컴 Homzzang.com") 대신 this.shoot (this, "홈짱닷컴 Homzzang.com") 사용) 하면, hz() 함수는 버튼이 클릭 될 때까지 기다리는 대신 페이지가 로드될 때 실행됨.
React event object (리액트 이벤트 객체)
1. 이벤트 인수는 2가지 방법으로 전달 가능.
[방법1] 익명 화살표함수로 이벤트 인수 수동 전달
[방법2] bind() 메서드로 이벤트 인수 자동 전달
2.
이벤트 핸들러는 함수 트리거 한 React 이벤트에 접근 가능.
[방법1] 익명 화살표함수로 이벤트 인수 수동 전달
※ 익명 화살표함수 사용 시, 이벤트 인수를 수동 으로 전송
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz = (a, b) => {
alert(b.type); // click
/*
'a' : 홈짱닷컴
'b' : 함수 실행을 촉발시킨 React event (예 경우: click) 의미.
*/
}
render() {
return (
<button
onClick={(ev) => this.hz("홈짱닷컴", ev) }
>클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
[방법2] bind() 메서드로 이벤트 인수 자동 전달
※ bind() 메서드의 마지막 인수로 이벤트 인수가 자동 전송됨.
import React from 'react';
import ReactDOM from 'react-dom';
class Btn extends React.Component {
hz = (a, b) => {
alert(b.type); // click
/*
'a' : 홈짱닷컴
'b' : 함수 실행을 촉발시킨 React event (예 경우: click) 의미.
*/
}
render() {
return (
<button
onClick={this.hz.bind(this, "홈짱닷컴") }
>클릭</button>
);
}
}
ReactDOM.render(<Btn />, document.getElementById('root'));
