React 공부하기 4 - Event

이벤트

리액트의 이벤트는 기본적으로 HTML의 이벤트와 비슷하지만, 주의사항이 몇가지 있습니다.

1. 이벤트 명은 카멜 케이스로 작성해야 한다. onclick → onClick
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니고, 함수형태의 값을 전달해야 한다.
3. DOM요소에만 설정할 수 있다. Custom Component는 onClick이벤트가 설정되는 것이 아니고, onClick Prop에 값이 넘어가는 것이다.

지원하는 이벤트 종류

• Clipboard
• Form
• Composition
• Keyboard
• Selection
• Focus
• Touch
• UI
• Image
• Wheel
• Animation
• Media
• Transition

import React, {Component} from 'react';


class MyEventComponent2 extends Component {

    state = {
        message: ''
    }

    handleChange = (e) => {
        this.setState({
            message: e.target.value,
        })
    }

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

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

    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message" 
                    placeholder="event가 달릴거야"
                    value={this.state.message}
                    onChange={this.handleChange}
                    onKeyPress={this.handleKeyPress}
                />            
                <button
                    onClick={this.handleClick}
                >
                확인
                </button>
            </div>
        )
    }
}

export default MyEventComponent2;

이 값을 위 처럼 state에도 넣을 수 있다.