3. 이벤트 핸들링

Event 사용 시 주의사항

- 이름은 카멜 표기법으로 작성한다 ex ) onClick
- 이벤트에 실행할 함수 형태의 값을 전달한다
- DOM 요소에만 이벤트를 설정할 수 있다

( div, button, input, form, span 의 DOM요소에는 이벤트 설정 가능 / 직접 만든 컴포넌트에는 자체 설정 불가능 )
-- MyComponent에 onClick을 설정하면 함수를 실행하는게 아니라, props를 MyComponent에 실행해준다
-- 그래서 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정한다
-- 이벤트 종류 : Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animation, Selection, Transition

 

- App.js

import './App.css';
import EventPractice from './EventPractice';

function App() {
  return <EventPractice/> 
};

export default App;

- EventPractice.js

import {Component} from 'react'

class EventPractice extends Component{
    render(){
        return (
            <div>
                <h1> 이벤트 연습</h1>
                <input
                type = "text"
                name = "message"
                placeholder = '아무거나 입력하세요'
                onChange = {
                    (e) =>{
                        console.log(e);
                        // 입력되는 과정이 실시간으로 기록됨
                        //console.log(e.target.value);
                    }
                }/>
            </div>
        )
    }
}
export default EventPractice;

log에서 event로 받은 e.target.value에서 최종적으로 입력된 값을 확인할 수 있다.

 

state에 input값을 담고 버튼을 누를 때마다 공백으로 설정해보자.

- EventPractice.js

import {Component} from 'react'

class EventPractice extends Component{
    
    state = {
        message : 'gogo'
    }
    
    render(){
        return (
            <div>
                <h1> 이벤트 연습</h1>
                <input
                type = "text"
                name = "message"
                placeholder = '아무거나 입력하세요'
                onChange = {
                    (e) =>{
                        // 입력받은 내용으로 state를 변경
                        this.setState({
                            message : e.target.value
                        })
                    }
                }/>
                <button onClick={
                    () => {
                        // click 시 state를 출력 후 state값 초기화
                        alert(this.state.message);
                        this.setState({
                            message : ''
                        });
                    }
                }>확인</button>
            </div>
        )
    }
}
export default EventPractice;

 

 

- EventPractice.js

onChange, onClick 에 전달한 함수를 따로 빼내서 컴포넌트 임의 메서드를 만들자.

임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 가리키기 위해서 메서드를 this와 바인딩하는 작업이 필요하다. 따라서 constructor에서 해당 작업을 해준다.

import {Component} from 'react'

class EventPractice extends Component{
    
    state = {
        message : 'gogo'
    }

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        // 입력받은 내용으로 state를 변경
        this.setState({
            message : e.target.value
        })
    }

    handleClick(){
        // click 시 state를 출력 후 state값 초기화
        alert(this.state.message);
        this.setState({
            message : ''
        });
    }
    
    render(){
        return (
            <div>
                <h1> 이벤트 연습</h1>
                <input
                type = "text"
                name = "message"
                placeholder = '아무거나 입력하세요'
                value = {this.state.message}
                onChange = {this.handleChange}/>
                <button onClick={this.state.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

위를 좀 더 간단하게 구현하면 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의할 수 있다.

import {Component} from 'react'

class EventPractice extends Component{
    
    state = {
        message : 'gogo'
    }

    handleChange = (e) => {
        // 입력받은 내용으로 state를 변경
        this.setState({
            message : e.target.value
        })
    }

    handleClick = () => {
        // click 시 state를 출력 후 state값 초기화
        alert(this.state.message);
        this.setState({
            message : ''
        });
    }
    
    render(){
        return (
            <div>
                <h1> 이벤트 연습</h1>
                <input
                type = "text"
                name = "message"
                placeholder = '아무거나 입력하세요'
                value = {this.state.message}
                onChange = {this.handleChange}/>
                <button onClick={this.state.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

input이 여러 개일때는 event 객체를 활용할 수 있다.

import {Component} from 'react'

class EventPractice extends Component{
    
    state = {
        username : '사용자명',
        message : 'gogo'
    }

	handleChange = (e) => {
        // 입력받은 내용으로 state를 변경
        this.setState({
            // 객체 안에서 key를 []로 감싸면
            // 그 안에 넣은 ref가 가리키는 실제 값이 key값으로 사용됨
            [e.target.name] : e.target.value
        })
    }

    handleClick = () => {
        // click 시 state를 출력 후 state값 초기화
        alert(this.state.username + ':' + this.state.message);
        this.setState({
            username : '사용자명',
            message : ''
        });
    }
    
    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}/>
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}
export default EventPractice;

 

여기까지 class로 구현한 부분인데 함수 컴포넌트로 구현해보자.

import {useState} from 'react'

const EventPractice = () =>{
    const [username, setUsername] = useState('');
    const [message, setMessage] = useState('');
    const onChangeUsername = e => setUsername(e.target.value);
    const onChangeMessage = e => setMessage(e.target.value);
    const onClick = () =>{
        alert(username + ':' + message);
        setUsername('');
        setMessage('');
    };
    const onKeyPress = e =>{
        if(e.key === 'Enter'){
            onClick();
        }
    };
    return(
        <div>
            <h1>이벤트 연습</h1>
            <input
                type = "text"
                name = "username"
                placeholder = '사용자명'
                value = {username}
                onChange = {onChangeUsername}/>
                <input
                type = "text"
                name = "message"
                placeholder = '아무거나 입력하세요'
                value = {message}
                onChange = {onChangeMessage}
                onKeyPress = {onKeyPress}/>
                <button onClick={onClick}>확인</button>
        </div>
    )
}

export default EventPractice;