[React]이벤트 핸들러

기본 방식

• 함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 html 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어진다.
• 임의의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩하는 작업이 필요함.

import React, {Component} from 'react'; 

class EventPractice extends Component {

    state = {
        message : '초기값'
    }
/*
여기서 컴포넌트와 메서드를 바인딩하는 작업이 이루어지고 있다. 
*/
    constructor(props) { 
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        this.setState({
            message: e.target.value
        });
    }

    handleClick(){
        alert(this.state.message);
        this.setState({
            message: ''
        });
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력해보세요"
                    value = {this.state.message}
                    onChange={this.handleChange}
                />

                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;

Properry Initializer Syntax를 사용한 메서드 작성

• 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의하면 constructor에서 메서드들을 bind해주는 작업을 하지 않아도 된다.

import React, {Component} from 'react'; 

class EventPractice extends Component {

    state = {
        message : ''
    }
    handleChange = (e) => {
        this.setState({
            message: e.target.value
        });
    }

    handleClick = () => {
        alert(this.state.message);
        this.setState({
            message: ''
        });
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무말이나 해보셈"
                    value = {this.state.message}
                    onChange={this.handleChange}
                />

                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;