React 이벤트 핸들링

이벤트 -> 유저가 웹 브라우저에서 DOM 요소들과 상호작용하는 것

• onChange(): Form 요소는 값이 바뀔 때 실행
• onMouseover(): 버튼에 마우스 커서 올렸을 때
• onClick(): 클릭

input요소 여러개 이벤트 핸들링

-> 메소드를 여러 개 만듬

-> event 객체 활용 = e.target.name값 사용

(1) 이벤트에 실행할 Js코드가 아닌, 함수 형태의 값 전달 -> 화살표 함수 문법으로 함수를 만들어 바로 전달 -> render() 렌더링 외부에 미리 만들어서 전달

(2) DOM 요소에만 이벤트 설정가능 -> DOM 요소: div, button, input, form, span... -> 직접 만든 컴포넌트에 전달X = 이름이 onClick인 props를 전달하는 것

// 이벤트 기본코드 참고
import React, { Component } from 'react'

class EventPractice extends Component {
    //state값 초기화
    state = {
        username:'',
        message:''
    }
    
    handleChange  = (e) => {
        this.setState({
            [e.target.name]: e.target.value,  //[]를 key값으로 이용하여, input 여러개 핸들링 가능         
        });
     }

    handleClick = (e) => {
        alert(this.state.username + ': ' + this.state.message);
        this.setState({
            username: '',
            message: ''
        });
    }

    handleKeyPress = (e) => {
        if(e.key === 'Enter'){
            this.handleClick();
        }
    }

    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input 
                    type="text" 
                    name="username" 
                    placeholder="성"
                    value={this.state.username} 
                    onChange={this.handleChange}
                />                    
                
                <input 
                    type="text" 
                    name="message" 
                    placeholder="이름"
                    value={this.state.message} 
                    onChange={this.handleChange} 
                    onKeyPress={this.handleKeyPress}
                />
                <button name="button" onClick={this.handleClick}>버튼</button>
            </div>

        );
    }
}

export default EventPractice