[React 따라하기 #11] React Event 리액트 이벤트

React 에서도 HTML 과 같은 이벤트를 사용합니다. click, change, mouseover등

대신 camelCase Syntax로 써야합니다. ( 단어단위로 대문자 시작 )

html 과 비교해보면

HTML :

<button onclick="doAction()">action!</button>

React :

<button onClick={doAction}>action!</button>
// doAction 이라는 function 이 있다면

 

기본적인 이벤트 사용

class Robot extends React.Component {
  render(){
    return (
      <button onClick={this.doAction}>Action!</button>
    )
  }
  doAction(){
    alert("ok");
  }
}

ReactDOM.render(<Robot />, document.getElementById("root"));

버튼을 클릭하게 되면 "ok" alert 이 뜹니다.

 

doAction  안에서 this 를 Bind 하고 싶을 때.

doAction = () => {
  alert(this);
}

이렇게 arrow function 으로 변경합니다.

또는 

  constructor(props) {
    super(props)
    this.doAction = this.doAction.bind(this)	// constructor 에서 bind 함.
  }
  
  doAction() {
    alert(this);
  }

 

 

파라메터 전송.

1. 이벤트를 arrow function 으로.

See the Pen event01 by Seunggeun Oh (@seunggeun-oh) on CodePen.

 

 

2. 이벤트에서 bind 를.

위 codepen 예제에서 render 만 아래와 같이 바꾸면 됩니다.

  render(){
    return (
      <button onClick={this.doAction.bind(this, "run") }>Action!</button>
    )
  }

 

주의! 
onClick 에서 파라메터 넘길 때 bind 를 잊지마세요~

 <button onClick={this.doAction.bind(this, "run") }>Action!</button> // 버튼클릭 시 작동
 <button onClick={this.doAction(this, "run") }>Action!</button>      // 페이지 load 시 작동

 

bind 키워드를 빼먹으면 페이지 load 할때 doAction 메소드가 실행됩니다.

 

 

Event Object 넘기기

class Robot extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <button onClick={this.doAction.bind(this, "run") }>Action!</button>
    )
  }
  doAction = (action, lastParamIsEventObject)=>{
    alert(this.props.def_action + " -> " + action + " : " + lastParamIsEventObject.type);
  }
}

ReactDOM.render(<Robot def_action="walk" />, document.getElementById("root"));

onClick 에서 명시적으로 event object 파라메터를 넘기지 않아도 

마지막 파라메터로 받아서 사용할 수 있습니다.

명시적으로 사용한다면,

  render(){
    return (
      <button onClick={(evnt)=>this.doAction("run", evnt) }>Action!</button>
    )
  }

이렇게 해도 결과는 같습니다.

 

 

2019/12/27 - [HTML,Javascript] - [React 따라하기 #1] React 개발에 필요한 도구 설치

2019/12/30 - [HTML,Javascript] - [React 따라하기 #2] React 시작하기 hello world!

2019/12/30 - [HTML,Javascript] - [React 따라하기 #3] Codepen에서 실행해보기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #4] ES6, js Class 에 대한 간단한 설명

2019/12/30 - [HTML,Javascript] - [React 따라하기 #5] React JSX

2019/12/30 - [HTML,Javascript] - [React 따라하기 #6] React Components(컴포넌트)

2019/12/30 - [HTML,Javascript] - [React 따라하기 #7] React Components(컴포넌트) 참조하기

2019/12/30 - [HTML,Javascript] - [React 따라하기 #8] React Props

2019/12/31 - [HTML,Javascript] - [React 따라하기 #9] React State

2020/01/02 - [HTML,Javascript] - [React 따라하기 #10] React 기본 함수 (life cycle)