이벤트 처리하기

리액트에서의 이벤트 등록

리액트 공식 튜토리얼에서는 HTML 태그에서 바로 이벤트를 주는 법과 비교하면서 설명하고 있는데

나는 자바스크립트에서 선택자를 이용해 불러와서 이벤트를 등록하는 방법만 사용하고 있어 그 예시는 이해를 잘 못하겠지만

클래스 이름으로 가져와서 이벤트를 부여하는 것이 아닌 사용할 이벤트 함수 이름을 태그에 미리 등록해두고 컴포넌트 내에서 이벤트 함수를 만드는 것..같다

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            number :0
        }
    }
    render() {
        return(
            <div>
                <h1>Hello, React</h1>
                <div>{this.state.number}</div>
                <button>+</button>
                <button>-</button>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.querySelector('#root')
);

위 코드는 이전에 알아봤던 state를 이용한 내부 값인 number를 출력하고 있는 컴포넌트다

아무런 기능을 하지 않는 +,-버튼이 있는데 이벤트를 할당해서 버튼을 누르면 nubmer값이 올라가고 내려가게 해보자

자바스크립트에서는 이벤트를 줄때 전부 소문자였지만 리액트에서는 보는 바와 같이 카멜 케이스를 사용해준다

addEventListener도 필요가 없다

render() {
    return(
        <div>
            <h1>Hello, React</h1>
            <div>{this.state.number}</div>
            <button onClick={this.handleIncreaseClick}>+</button>
            <button onClick={this.handleDecreaseClick}>-</button>
        </div>
    )
}

추가해주는 이벤트 핸들러들은 App 컴포넌트 내의 메소드이기 때문에 this를 붙여준다

그럼 이제 메소드를 만들어 보자

handleIncreaseClick() {
    this.setState({
        number : this.state.number +1
    })
}

handleDecreaseClick() {
    this.setState({
        number : this.state.number -1
    })
}

어려울게 하나도 없어 보인다

state의 값은 직접 수정하지 못하기 때문에 setState를 써서 클릭 이벤트가 발생했을때 number를 더하고 빼는 코드를 작성했다

setState가 정의되지 않았다고 뜬다

핸들 함수들이 이벤트의 콜백으로 넘어가면서 this를 잃어버린 것

이를 해결해주기 위해서는

컴포넌트의 생성자 부분에서 함수에 this를 바인드해서 다시 정의해주어야 this를 잃어버리지 않고 제대로 작동한다