이벤트 핸들링

  웹 개발에서의 event는 웹 브라우저에서 DOM 요소들과 상호 작용하는것을 의미합니다. 다른 포스팅 에서 button클릭이라던가, 키보드 입력, 마우스 커서 이동 등등 많은 이벤트 요소들이 있습니다. 이번 포스트에서는 과연 리액트에서는 이러한 이벤트 핸들링을 어떻게 처리하는지에 대해 다뤄보겠습니다.

 리액트에서의 이벤트 핸들링

 일반적으로 웹개발을 해보신 분이라면 HTML에 기본 이벤트 인터페이스들에 익숙할 것입니다 리액트에서는 해당 이벤트 핸들링 방법이 HTML과 동일하기 때문에 문법을 숙지하는 것은 어렵지 않으나 주의해야할 사항들이 몇가지 존재합니다.

• 이벤트 이름은 카멜 표기법으로 작성한다 ex) onclick ->onClick , onkeydown-> onKeyDown
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다
• DOM 요소에서만 이벤틀를 설정할 수 있다(리액트에서 직접 만든 컴포넌트에서 이벤트 핸들링은 불가능)

이번 포스팅에서는 간단하게 onClick event만 클래스 컴포넌트 방식과 함수형 컴포넌트 방식 두가지로  작성해보겠습니다. 다른 이벤트도 모두 사용방법은 동일 합니다.

import React from 'react';

const onClickEvent = () => {
    return (
        <div>
            <button onClick={()=>{
                alert("onclick function!") ;  
            }}>onclick Event!</button>
        </div>
    );
};

export default onClickEvent;

 먼저 함수형 컴포넌트에 해당 코드처럼 onClick 함술를 실행해주면 버튼을 클릭했을 떄 alert창을 띄워주는 이벤트를 실행한다 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class OnClickEventClass extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <button onClick={()=> {
                    alert("onClick event!")
                }}>onClick event!</button>
            </div>
        );
    }
}

OnClickEventClass.propTypes = {

};

export default OnClickEventClass;

이런 클래스형 컴포넌트에서도 결과는 동일합니다.