[7장]이벤트 처리

이번 포스팅에서는 리액트에서 어떻게 이벤트를 처리하는지에 대해서 알아보겠습니다. 리액트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다.

이벤트 등록

리액트를 사용하지 않는다면 우리는 흔히 아래와 같이 이벤트를 등록할 거예요.

    <button onclick="stopEvent()">
        정지
    </button>

하지만 리액트에서는 아래와 같은 이벤트 등록 문법이 존재합니다.

1. 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용
2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달

    import React from 'react';
    class EventComponent extends React.Component {

        //event
        stopEvent() {
            alert("정지");
        }

        render() {
            return (
                <div>
                    <button onClick={this.stopEvent}>
                        정지
                    </button>
                </div>
            )
        }
        
    }

컴포넌트 내에 이벤트 처리 함수를 정의한 후 JSX 안에서 위에서 설명한 문법을 지켜서 등록만 해주면 아주 간단하게 이벤트 등록이 완료됩니다.

this 바인딩 하기

이벤트 처리 시 컴포넌트 내의 값을 참조해야 하는 경우가 빈번하죠? 해당 컴포넌트에 접근하고자 이벤트 핸들러 함수에서 this를 사용하면 어떻게 될까요? 한번 로그를 찍어보도록 하겠습니다.
undefined가 로그로 찍히네요? 왜 그럴까요??
이 부분을 이해 하려면 React가 아닌 Javascript의 this 개념을 이해해야 하는데요. 이 부분에 대해서는 추후 별도의 포스팅으로 자세히 설명해 드리고 여기서는 간단하게 설명하겠습니다. Javascript에서의 this는 문맥의 흐름에 따라 변경이 된다는 특징이 있다는 것만 알고 있도록 해요. 즉 해당 함수를 호출 하는 게 누군지를 나타내는 게 this라고 생각하고 넘어가도록 합시다.
이러한 이유 덕득에 리액트에서는 this를 바인딩시켜서 사용해야 합니다. 리액트에서는 이벤트 핸들러에서 컴포넌트 this를 참조하려면 아래와 같은 방법을 사용합니다.

1. Component 생성자에서 이벤트 핸들러에 컴포넌트 this 바인딩
2. JSX에 이벤트 핸들러 등록 시 this 바인딩
3. 화살표 함수 사용하여 this 바인딩

import React from 'react';
class EventComponent extends React.Component {
    constructor(props) {
        super(props);
        //1. 생성자에서 this 바인딩
        this.stopEvent = this.stopEvent.bind(this);
    }
 
    //event
    stopEvent() {
        console.log(this);
    }

    render() {
        return (
            <div>
                {/* 이벤트 핸들러 등록 시 this 바인딩 */}
                <button onClick={this.stopEvent.bind(this)}>
                {/* 화살표 함수를 사용하여 this 바인딩 */}
                <button onClick={() => this.stopEvent()}>
                    정지
                </button>
            </div>
        )
    }

}

여러 방법이 있는데 개발자분들 께서 편한 방식을 쓰면 될거 같습니다. 로그를 한번 확인해 봅시다.
EventComponent 객체 값이 로그가 찍히는 것을 확인 할 수 있습니다.

참고 자료

https://ko.reactjs.org/docs/handling-events.html

포스팅 소스

https://github.com/aq3aq4/React_Posting/tree/master/react-basic/src/chapter07