REACT A to Z - 5

리액트에서 이벤트를 사용할 때 주의사항

1. 이름은 카멜표기법으로 작성함

   • onClick, onKeyUp etc
     
     

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

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

   • div, span, form, input 등의 DOM의 요소에는 이벤트 설정가능하지만 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음. 하지만 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있음.

class EventPractice extends Component {
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type = "text"
                    name = "message"
                    placeholder = "입력해보세요"
                    onChange={
                        (e) => {
                            console.log('e::', e);
                        }
                    }
                />
            </div>
        )
    }
}

로그로 찍는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체임.
네이티브 이벤트와 인터페이스가 같음 순수 js로 다룰 때는 HTML이벤트를 다룰 때와 똑같이 사용하면 됨

그러나 SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없음. 즉 0.5초 뒤에 e객체를 참조하면 e객체 내부의 모든값이 비워지게 됨

해결법? e.persist() 함수를 호출해주어야함 e.target.value호출하면 됨

값이 바뀔 때마다 콘솔에 기록해줌

state에 input값 담기

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

잘나오는 것 확인

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

이부분은 가독성이 좋음

***메서드 바인딩은 생성자 메서드에서 하는 것이 정석이지만
바벨의 transform-class-properties 문법 사용해서 메서드를 작성하면 더 간단하게 됨

import { Component } from "react";

class EventPractice extends Component {

    state = {
        message: ''
    }

    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;

input값을 여러개 다루는 방법

-event 객체를 활용하면 됨

handleChange = e => {
  this.setState({
  [e.target.name]: e.target.value
  });
}

객체안에서 key를 [ ] 로 감싸게 되면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용됨

const name = 'vKey' 
const object = {
  [name]: 'value'
}
==>
      {
      'vKey': 'value'
      }   

onKeyPress={this.handleClick} <= 이런식으로 keyPress 이벤트 사용해도 됨