[구름EDU|처음만난React#6] Handling Event

---

본 게시글은 구름EDU 처음 만난 React 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

처음 만난 React

처음 만난 React(리액트) - 구름EDU

구름 EDU

구름EDU - 모두를 위한 맞춤형 IT교육

---

Event

> a.k.a 사건(특정한)

> DOM에도 React에도 이벤트가 있다!

HTML

<button onclick = "activateLasers()">

    Activate Lasers

</button>

 

React

<button onclick = {activateLasers}>

    Activate Lasers

</button>
//camelCase 형태로 React Event Function Handling

 

Event Handler = Event Listener

>어떤 사건이 발생하면, 사건을 처리하는 역할

1. bind를 사용하는 방법

class Toggle extends React.Component{

    constructor(props){

        super(props);

        this.state = {isToggleOn: true}

 

        this.handleClick = this.handleClick.bind(this);

    }

 

    handleClick(){

        this.setState(state => ({

            isToggleOn : !state.isToggleOn

        }));

    }

 

    render(){

        return(

            <button onClick={this.handleClick}>

                {this.state.isToggleOn ? 'ON' : 'OFF'}

            </button>

        )

    }

}

 

2. Class Field Syntax를 사용하는 방법

class LogginButton extends React.Component{

    handClick = () => {

        console.log('this is:', this);

    }

 

    render(){

        return(

            <button onClick={this.handClick}>

                Click me

            </button>

        )

    }

}

 

cf) Arror function을 사용하는 방법도 있으나 call-back function이 render된다는 문제점이 있다.

Event Handler에 Arguments 전달하기

> Arguments?

> 주장; 함수에 주장할 내용; 함수에 전달할 데이터 = parameter

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)>Delete Row</button>

---

Bind 사용하기

{Project Name} / src / Chapter06.js

import React from 'react';

import ReactDOM from 'react-dom';

 

class Toggle extends React.Component{

    constructor(props){

        super(props);

        this.state = {isToggleOn: true};

 

        this.handleClick = this.handleClick.bind(this);

    }

 

    handleClick(){

        this.setState(state => ({

            isToggleOn: !state.isToggleOn

        }));

    }

 

    render(){

        return(

            <button onClick={this.handleClick}>

                {this.state.isToggleOn ? 'ON' : 'OFF'}

            </button>

        );

    }

}

 

ReactDOM.render(

    <Toggle />,

    document.getElementById('root')

);

 

export default Toggle;

{Project Name} / src / index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import reportWebVitals from './reportWebVitals';

import Chapter06 from './Chapter06';

//import App from './App';

 

ReactDOM.render(

  <Chapter06 />,

  document.getElementById('root')

);

reportWebVitals();

Arrow function 사용하기

{Project Name} / src / Chapter06.js

import React from 'react';

import ReactDOM from 'react-dom';

 

class Toggle extends React.Component{

    constructor(props){

        super(props);

        this.state = {isToggleOn: true};

 

        //this.handleClick = this.handleClick.bind(this);

    }

 

    handleClick = () =>{

        this.setState(state => ({

            isToggleOn: !state.isToggleOn

        }));

    }

 

    render(){

        return(

            <button onClick={this.handleClick}>

                {this.state.isToggleOn ? 'ON' : 'OFF'}

            </button>

        );

    }

}

 

ReactDOM.render(

    <Toggle />,

    document.getElementById('root')

);

 

export default Toggle;