이벤트 핸들링

이벤트 핸들링

• 이벤트 : 사용자가 웹 브라우저에서 DOM요소들과 상호작용 하는 것.

import React, {useState} from 'react';

const Glory = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕하가세요');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h2>{message}</h2>
    </div>
  ); 
};

export default Glory;

리액트에서 이벤트에 관한 코딩이다.

주의사항

• 카멜표기법으로 작성.ex) onclick -> onClick, onkeyup -> onKeyUp ...
• 함수의 형태의 값 전달.
• div, button, input 등 DOM요소에만 적용이 가능. 컴포넌트 자체에는 적용이 불가능.

클래스형 컴포넌트에서의 이벤트핸들링

import React, { Component } from 'react';

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

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

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

    handleKeyPress = (e) => {
        if (e.key === 'Enter') {
            this.handleClick();
        }
    }
    render() {
        return (
            <div style={{ margin: '10px 0 0 50px' }}>
                <h2>이벤트 연습(클래스형)</h2>
                <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
                    style={{ margin: '0 0 0 10px' }}
                    onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

함수형 컴포넌트에서의 이벤트핸들링

import React, { useState } from 'react';

const EventPractice1 = () => {
    const [form, setForm] = useState({
        username: '',
        message: ''
    })
    const { username, message } = form;
    const onChange = e => {
        const nextForm = {
            ...form,
            [e.target.value]: e.target.value
        };
        setForm(nextForm);
    };
    const onClick = () => {
        alert(username + ': ' + message);
        setForm({
            username: '',
            message: ''
        })
    };
    const onKeyPress = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    };
    return (
        <div style={{ margin: '10px 0 0 50px' }}>
            <h2>이벤트 연습(함수형)</h2>
            <input
                type='text'
                name='username'
                placeholder='사용자명'
                value={username}
                onChange={onChange}
            />
            <input
                type='text'
                name='message'
                placeholder='입력하세요'
                value={message}
                onChange={onChange}
                onKeyPress={onKeyPress}
            />
            <button
                style={{ margin: '0 0 0 10px' }}
                onClick={onClick}>확인</button>
        </div>
    );
};

export default EventPractice1;