[React] 이벤트 핸들링

이벤트 핸들링 이해하기

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트 라고 한다.

1. 리액트의 이벤트 시스템

리엑트의 이벤트 시스템은 웹 브라우저의 HTML이벤트와 인터페이스와 동일하기 때문에 사용법이 비슷하다. 하지만 주의해야 할 몇 가지 사항이 있다.

1) 주의 사항

• 이벤트 이름은 카멜 표기법으로 작성한다.
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
• DOM 요소에만 이벤트를 설정할 수 있다.

2. 이벤트 핸들링 과정

1) 컴포넌트 생성하기

src 밑에 EventPractice.js 파일을 다음과 같이 생성한다.

import React, { Component } from 'react';

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
            </div>
        );
    }
}

export default EventPractice;

2) onChange 이벤트 설정

EventPractice.js에 계속하여 작성한다.

import React, { Component } from 'react';

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    onChange={
                        (e)=>{
                            console.log(e.target.value);
                        }
                    }
                    />
            </div>
        );
    }
}

export default EventPractice;

값이 바뀔 때마다 바뀌는 값을 콘솔에 기록한다.

이제 state에 input 값을 담고 버튼을 누르면 값을 공백으로 설정해보겠습니다.

import React, { Component } from 'react';

class EventPractice extends Component {
    state={
        message:''
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하세요"
                    value={this.state.message}
                    onChange={
                        (e)=>{
                            this.setState({
                                message: e.target.value
                            })
                        }
                    }
                    />
                    <button onClick={
                        ()=>{
                            alert(this.state.message);
                            this.setState({
                                message:''
                            });
                        }
                    }>확인</button>
            </div>
        );
    }
}

export default EventPractice;

3) 임의 메서드 만들기

앞에서 살펴본 주의 사항에 "이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. " 라고 했다.
그래서 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달해 주었습니다. 이번에는 이 방법 대신 함수를 미리 준비하여 전달하는 방식을 해보겠습니다. 성능은 거의 차이가 없지만, 가독성은 훨씬 높습니다.

import React, { Component } from 'react';

class EventPractice extends Component {
    state={
        message:''
    }
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        this.setState({
            message: e.target.value
        })
    }
    handleClick(){
        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.handleClick}>확인</button>
            </div>
        );
    }
}

export default EventPractice;