React - 이벤트 핸들링

리액트 이벤트 시스템

render(){

        return (

            <Fragment>

                안녕하세요 {this.props.abcd}

                <br/>

                여긴 state 값이 출력됩니다. : {this.state.num}

                <button onClick={()=> { 

                        this.setState({

                            num:this.state.num + 1

                        })

                    }

                }></button>

 

            </Fragment>

        )

    }

HTML과 비슷해보이지만 다른 표현 있어서 주의해야 한다.

1. 이벤트이름은 카멜케이스로 작성

onclick   -> onClick

onkeyup -> onKeyUp

2. 이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달

HTML에선 더블쿼테이션안에 실행할 코드를 넣지만

리액트에선 함수 형태로 전달한다. 

onclick="event()" -> onClick={event()}

3. DOM 요소에만 이벤트를 설정할 수 있다.

DOM요소 (div,p,button,input ... ) 에 만 이벤트를 설정할수있다.

X	O
<MyComponent onClick={ event } />	<div onClick={this.props.onClick}> { } </div>

전달받은 props를 MyComponent 내부의 DOM 이벤트를 설정하는것은 가능하다.

onChange 이벤트 핸들링

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);
                        } 
                    }
                />
            </div>
        )
    }
}
export default EventPractice;

개발자 도구로 보면 e는 syntheicEvent로 네이티브 이벤트를 감싸는 객체이다.

네이티브이벤트와 인터페이스가 같으므로 순수 자바스트립트에서 HTML 이벤트를 다룰때와

똑같이 사용하면된다.

onChange={
    (e)=>{
           console.log(e.target.value);
    } 
}

이렇게 하면

값이 바뀔때마다 value가 나오게 된다.

state에 input 담기

import React, {Component} from 'react';
 
class EventPractice extends Component {
 
    constructor(){
        super();
        this.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
                        })
                }}/>
            </div>
        )
    }
}
export default EventPractice;

오류가 발생하지않고 담았다면 제대로 담아졌을 것이다.

이와 같이 여러가지를 응용할 수 있다.

버튼 누를때 현재 state의 message의 값을 확인 해보자

import React, {Component} from 'react';
 
class EventPractice extends Component {
 
    constructor(){
        super();
        this.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: '' 
                        })
                    }
                }>
                state 확인
                </button>
            </div>
        )
        
    }
}
export default EventPractice;

이렇게 하면 state의 message를 alert에 띄운 후 state에 제대로 들어가는지 확인이 가능하다

그리고 확인한 후 다시 state를 '' 로 만들었다.

임의 메서드 만들기

메서드를 만들어서 처리하는 방식도 할수있다.

import React, {Component} from 'react';
 
class EventPractice extends Component {
 
    constructor(){
        super();
        this.state = {
            message: ''
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
 
    
    handleChange(e){
        this.setState({
            message:e.target.value
        });
    }
 
    handleClick(){
        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}>
                state 확인
                </button>
            </div>
        )
        
    }
}
export default EventPractice;

컴포넌트에 임의 메서드를 만들면 기본적으로 this에 접근할 수 없다.

handleChange()

handleClick()

따라서 컴포넌트의 생성자 메서드인 constructor에 각 메소드를 this와 바인딩해주어야 한다.

 constructor(){

this.handleChange = this.handleChange.bind(this);

    this.handleClick = this.handleClick.bind(this);

}

input 여러개를 핸들링

e.target.name 값을 사용하면

onChange이벤트 핸들러에서 e.targer.name은 해당 인풋의 name을 가르켜 해결할수있다.

import React, {Component} from 'react';
 
class EventPractice extends Component {
 
    constructor(){
        super();
        this.state = {
            message: '',
            username : '',
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
 
    
    handleChange(e){
        this.setState({
           [e.target.name]:e.target.value
        });
    }
 
    handleClick(){
        alert(this.state.username + ' , '+this.state.message);
        this.setState({
            message:'',
            username:''
        });
    }
 
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력"
                    value={this.state.message}
                    onChange={this.handleChange} />
                    <br/>
                <input
                type="text"
                name="username"
                placeholder="유저명"
                value={this.state.username}
                onChange={this.handleChange} />
 
                <button onClick={this.handleClick}>
                state 확인
                </button>
            </div>
        )
        
    }
}
export default EventPractice;

input의 name에 맞춰서 state의 key의 값을 업데이트 시켜주었다.

this.setState({

           [e.target.name]:e.target.value

        });

[e.targer.name]를 한것은 

e.targer.name은 주소값의 객체가 아니기에

["username"] 문자열이기 때문에 []로 감싼다.