handleEvent, onEvent, and this.props.onEvent

handleEvent, onEvent, and this.props.onEvent

 

 

네이밍에 대해 이야기 나눠보자.

 

당신이 막 만든 event handler 를 prop로써 전달할 때, 당신이 선택해야할 두 name이 있다.

 

두 가지 네이밍 선택은 모두 부모 구성 요소 클래스,

즉 이벤트 핸들러를 정의하고 이를 전달하는 컴포넌트 클래스에서 이루어진다.

 

당신이 선택해야하는 첫번째 이름은 이벤트 핸들러 고유의 이름이다. 

 

Talk.js 6~ 12번째 줄을 보아라. 

 

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button talk={this.talk} />;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

이것이 우리의 이벤트 핸들러이다. 우리는 talk로 이름을 정했다. 

 

당신이 선택해야할 두번째 이름은 이벤트 핸들러로 패스하기 위해 사용할 prop의 이름이다.

이것은 당신의 attribute이름으로써 같은 것이다. 

 

우리의 prop 네임을 위해, 우리는 15번째 줄에에 보여진대로 talk를 선택했다. 

 

 

return <Button talk={this.talk} />;

 

 

이러한 두 이름들은 당신이 원하는것은 무엇이든지 적을 수 있다. 

그러나, 그들이 자주 따르는 naming convention이 있다. 

당신은 이 convention을 따라야만 하는 것은 아니지만, 당신이 이것을 볼 때 이해할 수는 있어야 한다. 

 

어떻게 naming convention이 동작하는가 : 

 

첫째, 당신이 기다리고 있는 event의 종류가 무엇인지 생각해라.

우리의 예시에서, event 종류는 click이다. 

 

 

만약 당신이 "click" 이벤트를 listening 하고 있다면, 

당신은 당신의 이벤트 핸들러를 handleClick 이라 지을 수 있다.

만약 당신이 "keyPress"이벤트를 리스닝하고 있다면, 

당신은 이벤트 핸들러를 handleKeyPress라 이름지을 수 있다. 

 

class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will be called in response to "hover" events.');
  }
}

 

당신의 prop 이름은 단어 on + 이벤트 타입이 되어야만 한다. 

만약 당신이 "click"이벤트를 리스닝한다면, 

당신의 prop은 onClick이라 이름지을 수 있다. 

만약 당신이 "keyPress"이벤트를 리스닝한다면, 당신은 onKeyPress라 prop을 이름지을 수 있다. 

 

class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will listen for a "hover" event.');
  }

  render() {
    return <Child onHover={this.handleHover} />;
  }
}

 

 

---

// Button.js

// The attribute name onClick
// creates an event listner:
<button onClick={this.props.onClick}>
  Click me!
</button>

 

// Button.js

// The attribute name onClick
// creates an event listner:
<button onClick={this.props.onClick}>
  Click me!
</button>

 

위 두 코드의 attribute 이름 onClick을 비교해보자면, 

<button></button> 에 attribute로써 쓰여진 onClick은 클릭하면 값으로 정해진 이벤트가 동작하는 이벤트리스너를 생성한다.

 

반면에 클래스 컴포넌트를 가져온 <Button />에 쓰여진 onClick은 html같은 JSX요소가 아니고,

컴포넌트 인스턴스이다. 그래서 이것은 이벤트리스너가 없고 그냥 attribute이름이다. 

 

 

https://www.codecademy.com/courses/react-101/lessons/this-props/exercises/handleevent-onevent-props-event