Event Handling

🎈리액트의 이벤트 시스템

🧨이벤트를 사용할 때 주의 사항

1. 이벤트 이름은 camelCase로 작성.
   • HTML의 onclick은 React에서 onClick으로 작성.
   • onkeyup -> onKeyUp
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달.
   • HTML에서는 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣음.
   • 리액트에서는 함수 형태의 객체를 전달.
3. DOM 요소에만 이벤트를 설정할 수 있습니다.
   • div, button, input, form, span등 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음.

🎁이벤트 종류

• clipboard
• Composition
• Form
• Mouse
• Keyboard
• Selection
• Focus
• Touch
• UI
• Wheel
• Media

🎁onChange Event

import React, {Component} from "react";

class EventPractice extends Component{
    state={
        message:''
    }
    render(){
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input 
                type = "text" //input의 type
                name = "message" //input의 제목.
                placholder = "아무거나 입력하시오." //hint
                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;

• input
  • value 값 : this.state.message로 설정.(state값이 업데이트 될때마다 value값 지정.)
  • onChange : setState를 통하여 message의 값 e.target.value(사용자가 작성한 값)을 지정.
• button
  • button을 클릭할 때마다 alert를 통하여 message의 값 나오게 함.
  • 그 후 message의 값을 공백으로 바꿔주어 input의 값도 공백으로 바꿔줌.(연결되어있음)

🧨임의 메서드 만들기

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

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(e){
        this.setState({
            message: ''
        });
    }
    render(){
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input 
                type = "text" //input의 type
                name = "message" //input의 제목.
                placholder = "아무거나 입력하시오." //hint
                value={this.state.message}
                onChange={this.handleChange}
                />
                <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}

export default EventPractice;

위의 코드와 성능상으로 차이가 거의 없지만, 가독성이 훨씬 높습니다.

🧨Property Initializer Syntax

메서드 바인딩은 생성자 메서드에서 하는 것이 정석.
하지만 이 작업을 불편하다고 느낄 수 있습니다. 새 메서드를 만들 때마다 constructor도 수정해야 하기 때문입니다.
이 작업을 간단하게 하는 방법입니다.

바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의하면 됩니다. () =>{}

handleChange =(e) =>{
        this.setState({
            message:e.target.value
        });
    }

참고 : <리액트를 다루는 기술>