React 이벤트 처리에 대해서 알아보자

이벤트

이벤트는 카멜표기법으로 명명한다.   

이벤트는 DOM 요소에만 적용 가능하다.

// DOM 적용 사례
<input onClick={this.props.onClick} />

 

Component 에 자체적으로 설정할 수 없다.   

아래를 예시를 보면, Test에 onClick 이라는 props를 전달한다는 의미다.   

onClick 이벤트가 아님을 주의하자!   

// DOM 적용 사례
<Test onClick={data} />

 

false를 반환해도 기본 동작을 막을 수 없으며, 반드시 preventDefault를 명시적으로 호출해야 한다.

function returnFalse(e) {
    e.preventDefault();
}

 

 

이벤트 - 클래스형 컴포넌트

바벨 transform-class-properties 문법으로 선언할 경우, constructor를 선언하는것 보다 간편하게 사용할 수 있다.

# 파일 : PracEventClass.js

import React, { Component } from 'react';

class PracEventClass extends Component {

    // constructor(props) {
    //     super(props);
    // }

    state = {
        msg: ''
    }

    eventChange = (e) => {
        this.setState({
            msg: e.target.value
        })
    }
    eventClick = (e) => {
        this.setState({
            msg: ''
        });
    }

    render() {
        return (
            <div>
                React Event - Class
                <div>
                    <input
                        type='text'
                        name='msg'
                        value={this.state.msg}
                        onChange={this.eventChange}
                    />
                    <hr />
                    <button onClick={this.eventClick}
                    >Reset</button>
                </div>
            </div>
        );
    }
}

export default PracEventClass;

 

 

이벤트 - 함수형 컴포넌트

useState() 에 객체를 넣어 좀 더 간결하게 표현 가능하다.   

input 엘리먼트를 중복으로 제어해야할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해주면 훨씬 유용하게 활용할 수 있다.

# 파일 : PracEventFunc.js

import React, { useState } from 'react';

const PracEventFunc = () => {

	// useState에 객체를 넣어 사용 가능
    const [form, setForm] = useState({
        name: '',
        msg: ''
    });

    const { name, msg } = form;

    const onChange = (e) => {
        const makeForm = {
            ...form,  // ES6는 spread syntax 배열에서 지원하여 쉽게 사용 가능하다!
            [e.target.name]: e.target.value
        };
        setForm(makeForm);
    };

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

    return (
        <div>
            React Event - Function
            <div>
                이름 : <input
                    type='text'
                    name='name'
                    value={name}
                    onChange={onChange}
                />
                <br />
                입력값 : <input
                    type='text'
                    name='msg'
                    value={msg}
                    onChange={onChange}
                />
                <hr />
                <button onClick={onClick}>Reset</button>
            </div>
        </div>
    );
};

export default PracEventFunc;

 

*참고

리액트 공식 사이트-합성 이벤트(SyntheticEvent) [바로가기]