EventHandling

이벤트 사용 시, 주의사항

• 이벤트 이름 : 카멜 표기법
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값 전달
  • 함수 형태의 객체 전달
• DOM 요소에만 이벤트 설정 가능
  • 즉, div, button, input, form, span 등의 DOM요소에만 이벤트 설정 가능
    • 직접 만든 컴포넌트에는 이벤트 자체 설정 X
      • ex) <MyComponent onClick = {doSomething} />
        • MyConponent에 onClick값을 설정하면, MyComponent를 클릭할 때 doSomething함수 실행하는 것이 아니라
          그냥 이름이 MyComponent에게 onClick (props)를 전달

 

예제

• e객체를 콘솔창에 출력

import React, {Component} from 'react';

class EventPractice extends Component {

    state = {
        message : ''
    }

    render() {
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type = 'text'
                    name = 'message'
                    placeholder = 'state에 저장할 값 입력'
                    value = {this.state.message}
                    onChange = {
                        (e) => {        //e객체 : SyntheticEvent (웹 브라우저의 네이티브 이벤트를 감싸는 객체) (이벤트 종료 뒤, 이벤트 초기화)
                            console.log(e.target.value);
                        }
                    }
                />
            </div>
        );
    }

}

export default EventPractice;

• 입력받은 문자열을 알림창에 띄우기

import React, {Component} from 'react';

class EventPractice extends Component {

    state = {
        message : ''
    }

    render() {
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type = 'text'
                    name = 'message'
                    placeholder = 'state.message에 저장될 값 입력'
                    value = {this.state.message}
                    onChange = {
                        (e) => {
                            this.setState({
                                message : e.target.value    //입력된 값을 state의 message에 저장.
                            })
                        }
                    }
                />
                <button onClick = {
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message : ''            //state의 message 초기화.
                        });
                    }
                }>확인</button>
            </div>
        );
    }

}

export default EventPractice;

 

 

임의 메서드 만들기

• 미리 함수를 준비하여 이벤트에 전달하는 방법
  • 가독성 높음
• 예제
  • 임의 메소드를 먼저 만들어놓고, 이벤트 발생 시, 호출

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        //해당 값을 state의 message에 저장.
        });
    }
    handleClick() {
        alert(this.state.message);
        this.setState({
            message : ''            //state의 message 초기화.
        });
    }

    render() {
        return(
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type = 'text'
                    name = 'message'
                    placeholder = 'state의 message에 저장될 값 입력'
                    value = {this.state.message}
                    onChange = {this.handleChange}      //입력된 값을 state의 message에 저장.
                />
                <button onClick = {this.handleClick}>확인</button>
            </div>
        );
    }

}

export default EventPractice;

          클래스의 임의 메소드가 특정 HTML요소의 이벤트로 등록 => 메소드와 this의 관계 끊어짐

          => .bind(this)필요  (임의 메소드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해)