출처: https://www.codecademy.com

컴포넌트 클래스 내에서 event handler 사용하기

event handler 함수 정의 : 컴포넌트 클래스에 메서드 형식으로 정의한다.

    //example.js
    
    import React from 'react';
    
    class Example extends React.Component {
        
      handleEvent() {  //컴포넌트 클래스 내부에 메서드 형식으로 이벤트 핸들러 정의 
        alert(`I am an event handler.
          If you see this message,
          then I have been called.`);
      }
    
      render() {
        return (
          <h1 onClick={this.handleEvent}>
            Hello world
          </h1>
        );
      }
    }

다른 컴포넌트의 event handler 사용하기

예) Talker 컴포넌트에 정의된 talk라는 이벤트 핸들러를 Botton 컴포넌트에서 사용하기

// Talker.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Button } from './Button';
    
    class Talker extends React.Component {
      // "blah" 가 알림창에 9999번 찍히는 event handler
      talk() {     
        let speech = '';
        for (let i = 0; i < 10000; i++) {
          speech += 'blah ';
        }
        alert(speech);
      }
      
      render() {    
        return <Button talk={this.talk} />; // 여기서 Button 컴포넌트 클래스를 불러서 사용. 
                                            // 앞 talk은 속성name, 뒤 this.talk는 이벤트 핸들러
      }
    }
    
    ReactDOM.render(
      <Talker />,
      document.getElementById('app')
    );

.

// Button.js
    import React from 'react';
    
    export class Button extends React.Component {
      render() {
        return ( 
          <button talk={this.props.talk}>   //this.props.talk 를 통해서 talk function에 접근할 수 있게된다.
            Click me!
          </button>
        );
      }
    }

실행화면

event handler naming

event handler를 prop으로 넘겨주기 위해서는 두번의 네이밍이 필요하다.

첫번째는 event handler 그 자체의 name, 두번째는 컴포넌트의 속성 name.

마음대로 naming 해도 실행은 되지만 나름의 규칙이 있으니 따르도록 하자.

  1. think about what type of event you are listening for.

    click 이벤트: handleClick

    keyPress 이벤트 handleKeyPress

  2. Your prop name should be the word on.

    handleClick - onClick

    handleKeyPress - onKeyPress

아래는 위 규칙을 적용한 코드이다.

// Talker.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Button } from './Button';
    
    class Talker extends React.Component {
      handleClick() {    
        let speech = '';
        for (let i = 0; i < 10000; i++) {
          speech += 'blah ';
        }
        alert(speech);
      }
      
      render() {    
        return <Button onClick={this.handleClick} />;   
      }
    }
    
    ReactDOM.render(
      <Talker />,
      document.getElementById('app')
    );

.

// Button.js
    import React from 'react';
    
    export class Button extends React.Component {
      render() {
        return ( // 
          <button onClick={this.props.handleClick}>   
            Click me!
          </button>
        );
      }
    }