React - Event 개요와 간단한 예제

이벤트 처리 시 주의점

• 이벤트 이름은 카멜 표기법 사용 : 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 이벤트 - Event.js, App.js

• 클래스형 컴포넌트 Event 생성
• state 선언 / setState() 사용해서 state 변경
• 이벤트 객체 받아와서 이벤트가 발생한 대상의 값으로 state 값 변경

import React, { Component } from 'react';

class Event extends Component {
    state = {
        message: ''
    }
    // 이벤트 핸들러
    onChange = e => {
        this.setState({
            message: e.target.value
        })
    };
    render() {
        return (
            <div>
                <hr />
                <h3>이벤트 연습</h3>
                <input type="text" name='message'
                        onChange={this.onChange} />
                <h3>{this.state.message}</h3>
            </div>
        );
    }
}

export default Event;

import React, { Component } from 'react';
import './App.css'
import Counter from './components/Counter';
import Image from './components/Image';
import Message from './components/Message';
import Event from './components/Event';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <h1>State 연습</h1>
        <Counter></Counter>
        <Image></Image>
        <Message></Message>
        <Event></Event>
      </div>
    );
  }
}

export default App;

onChange 이벤트 로그인 연습문제 - Login.js, App.js

import React, { Component } from 'react';

class Login extends Component {
    state = {
        id : '',
        pass : ''
    }
    onIdChange = e => {
        this.setState({
            id: e.target.value
        })
    };
    onPassChange = e => {
        this.setState({
            pass: e.target.value
        })
    };

    onShow = () => {
        if(this.state.id == 'abcd' && this.state.pass == '1234') {
            alert("로그인 성공")
        }
        else {
            alert("로그인 실패")
        }
    };
    render() {
        return (
            <div>
                아이디 : <input type='text' name='id' size='10'
                    value={this.state.id}
                    onChange={this.onIdChange} /> &nbsp;
                    <br />
                비밀번호 : <input type='password' name='pass' size='10'
                    value={this.state.pass}
                    onChange={this.onPassChange} /> &nbsp;

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

export default Login;

import React, { Component } from 'react';
// ... // 
import Login from './components/Login';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <h1>State 연습</h1>
        <Counter></Counter>
        <Image></Image>
        <Message></Message>
        <Event></Event>
        <Login></Login>
      </div>
    );
  }
}