4장 이벤트 핸들링

4.1 리액트의 이벤트 시스템

4.1.1 이벤트를 사용할 때 주의 사항

• 이벤트 이름은 카멜 표기법으로 작성
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달. 
• DOM 요소에만 이벤트를 설정할 수 있음. (직접 만든 컴포넌트에는 이벤트를 설정할 수 없음.)

4.1.2. 이벤트 종류

4.2 예제로 이벤트 핸들링 익히기

4.2.1 컴포넌트 생성 및 불러오기

4.2.2 onChange 이벤트 핸들링하기

import React, {Component} from "react";

class EventPractice extends Component {
    state = {
        message: ''
    }

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

}

export default EventPractice;

4.2.3 임의 메서드 만들기

//함수 주입
//함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 html요소의 이벤트로 등록되는 과정에서
//메서드와 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;


// 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메소드를 정의
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;

4.2.4 이벤트 여러개 다루기

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

4.2.5 onKeyPress 이벤트 핸들링

4.3 함수형 컴포넌트로 구현해 보기

import React, {useState} from "react";

const EventPractice = () => {
    const [form, setForm] = useState({username: '', message: ''})
    const {username, message} = form;

    const onChange = e => {
        const nextForm = {
            ...form,
            [e.target.name]: e.target.value
        }
        setForm(nextForm);
    }

    const onClick = () => {
        alert(username + ':' + message);
        setForm({
            username: '',
            message: ''
        })
    }

    const onKeyPress = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    }

    return (
        <div>
            <h1>이벤트 연습</h1>
            <input type="text" name="username" placeholder="사용자명" value={username}
                   onChange={onChange}/>
            <input type="text" name="message" placeholder="아무거나 입력해 보세요"
                   value={message}
                   onChange={onChange}
                   onKeyPress={onKeyPress}/>
            <button onClick={onClick}>확인
            </button>
        </div>
    );

}

export default EventPractice;