이벤트 처리 시 주의점

이벤트 처리 시 주의점

• 이벤트 이름은 카멜 표기법 사용
  • onClick, OnKeyUp, onChange
• 이벤트에 이벤트 핸들러 함수 형태의 값 전달
  • onClick = {onClickEnter}
  • onClick = {() => setColor(‘green’)}
• DOM 요소에만 이벤트 설정 가능
  • 사용자가 직접 만든 컴포넌트에는 이벤트 직접 설정 불가
  • onClick을 props로 전달해서 컴포넌트 내부의 DOM 이벤트로 설정 가능
    • 예 : MyComponent에 onClick 설정 시
    • <MyComponent onClick = {eventHandler}  /> 했을 때
    • 클릭 시 eventHandler() 함수를 실행하는 것이 아니라
    • 이름이 onClick인 props를 MyComponent에 전달하는 것
    • 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능
    • <div onClick={this.props.onClick}></div>

 

onChange 이벤트 예제 - 1 (Event.js)

import React, { Component } from 'react';

class Event extends Component {
    state = {
        message:'',
        id:'',
        pw:''
    }

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

    // (1) id 값 변경하는 이벤트 핸들러
    onIdChange = e => {
        this.setState({
            id:e.target.value
        });
    }

    // (2) pw 값 변경하는 이벤트 핸들러
    onPwChange = e => {
        this.setState({
            pw:e.target.value
        });
    }

    // (3) [완료] 버튼 클릭 시 실행되는 이벤트 핸들러
    // 입력한 id와 pw 값을 alert()로 출력
    onShow = e => {
        alert('id : ' + this.state.id + ' pw : ' + this.state.pw);
    }

    render() {
        return (
            <div>
                <hr/>
                <h3>이벤트 연습</h3>
                <input type="text" name="message" onChange={this.onChange}/>
                <h3>{this.state.message}</h3>

                {/* id와 pw 입력 받기 위한 <input> 태그 작성 */}
                <input type='text' name='id' size='10' value={this.state.id} onChange={this.onIdChange}/> &nbsp;
                <input type='password' name='pw' size='10' value={this.state.pw} onChange={this.onPwChange}/> &nbsp;

                <button onClick={this.onShow}>완료</button>
            </div>
        );
    }
}

export default Event;

 

onChange 이벤트 예제 - 2 (Login.js)

import React, { Component } from 'react';

class Login extends Component {
    state = {
        id:'',
        pw:''
    }

    // (1) id 값 변경하는 이벤트 핸들러
    onIdChange = e => {
        this.setState({
            id:e.target.value
        });
    }

    // (2) pw 값 변경하는 이벤트 핸들러
    onPwChange = e => {
        this.setState({
            pw:e.target.value
        });
    }

    // 로그인 성공 실패 출력
    onShow = e => {
        if(this.state.id=='abcd' && this.state.pw=='1234') alert('로그인 성공');
        else alert('로그인 실패');
    }

    render() {
        return (
            <div>
                <br/><br/><br/><br/>
                <input type='text' name='id' size='10' value={this.state.id} onChange={this.onIdChange}/> &nbsp;
                <input type='password' name='pw' size='10' value={this.state.pw} onChange={this.onPwChange}/> &nbsp;

                <button onClick={this.onShow}>로그인</button>
            </div>
        );
    }
}

export default Login;