[React] 이벤트 핸들링

이벤트 핸들링

• 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 처리하는 것

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

1. 이벤트 이름은 카멜 표기법을 작성 (ex : onClick, onKeyUp)
2. 이벤트에 실행할 자바스크립트를 전달하는 것이 아닌 함수 형태의 값 전달
3. DOM 요소에만 이벤트를 설정 (DOM 요소 : div, button, input, span 등)

---

React에서 이벤트 핸들링하기

• onChange 이벤트 설정

<input
	type = "text"
    name = "message"
    placeholder = "아무거나 입력해 보세요"
    onChanage = {
        (e) => {
            console.log(e.target.value); <!-- 앞으로 변할 인풋값을 콘솔에 기록 -->
        }
    }
/>

• state에 input 값 담기

class EventPractice extends Component {
    state = {
        message : "" 
    } // 초기값 설정

    render() {
        return (
            <div>
                <input
                    type = "text"
                    name = "message"
                    placeholder = "아무거나 입력해 보세요"
                    value = {this.state.message}
                    onChanage = {
                        (e) => {
                            this.setState({
                                message : e.target.value 
                            }) <!-- state 업데이트 -->
                        }
                    }
                />
            </div>
       )
    }
}

• 임의 메서드 만들기
  • 미리 함수를 준비하여 전달
    • 가독성이 높음

import {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>
                <input
                    type='text'
                    name='message'
                    placeholder='아무거나 입력해 보세요'
                    value={this.state.message}
                    onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;

---

함수 컴포넌트로 구현

import React, {useState} from 'react';

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

    const { username, message } = form;

    const onChange = e => {
        const nextForm = {
            ...form, // 기존의 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;