[리액트를 다루는 기술] 4장 이벤트 핸들링

리액트 이벤트 시스템

1. 이벤트 이름은 카멜 표기법으로 작성한다. ex) onClick
2. 이벤트에 함수 형태의 객체를 전달한다.
3. DOM 요소에만 이벤트 설정이 가능하다.

• e.target.name 객체를 활용하여 input 여러개 state 다루면 편리하다

클래스형 컴포넌트로 구현하기

import React, {Component} from 'react';

class EventPractice extends Component {
    state = {
        username: '',
        msg: ''
    }

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

    handleClick = () => {
        this.setState({
            username: '',
            msg: ''
        })
    }
    
    handleKeyPress = (e) => {
        if(e.key === 'Enter') {
            this.handleClick()
        }
    }

    // event 객체를 활용하여 input 여러개 state 다루기
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input 
                    type="text" 
                    name="username" 
                    placeholder="이름" 
                    value={this.state.username}
                    onChange={this.handleChange}>
                </input>
                <input 
                    type="text" 
                    name="msg" 
                    placeholder="입력하세요" 
                    value={this.state.msg}
                    onChange={this.handleChange}
                    onKeyPress={this.handleKeyPress}>
                </input>
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}

export default EventPractice;

함수형 컴포넌트로 구현하기

import React, {useState} from 'react';

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

    const [username, msg] = form

    // e.target.name 객체를 활용하여 input 여러개 state 다루기
    const onChange = e => {
        const nextForm = {
            ...form, // 기존 form 내용을 복사하기
            [e.target.name]: e.target.value // 원하는 값을 덮어 씌우기
        }

        setForm(nextForm)
    }

    const onClick = () => {
        setForm({
            username: '',
            msg: ''
        })
    }

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

    return (
        <div>
            <h1>이벤트 연습</h1>
            <input 
                type="text" 
                name="username" 
                placeholder="이름" 
                value={username}
                onChange={onChange}>
            </input>
            <input 
                type="text" 
                name="msg" 
                placeholder="입력하세요" 
                value={msg}
                onChange={onChange}
                onKeyPress={onKeyPress}>
            </input>
            <button onClick={onClick}>확인</button>
        </div>
    )
}