[React] 이벤트 핸들링 정리

이벤트 핸들링

- 웹 브라우저에서 DOM 요소들과 상호 작용하는 것
- 이벤트 이름은 카멜 표기법으로 작성
- 이벤트 설정 시 함수 형태의 값을 전달
- DOM 요소에만 이벤트 설정 가능 (직접 만든 컴포넌트에 이벤트 설정 불가)
- Clipboard, Focus, Mouse, Form 등

OnChange 이벤트

// Event.js
import React, { Component } from 'react'

class Event extends Component{
  render(){
    return (
      <div>
        <h1>이벤트 </h1>
        <input type = "text" 
        name = "message"
        onChange={
          (event) => {console.log(event)}
        }
        ></input>
      </div>  
    )
  }
}

export default Event

//App.js
import React from 'react'
import Event from './Event'

const App = () => {
  return <Event />
}

export default App

 

State에 입력 값 담기

import React, { Component } from 'react'

class Event extends Component{
  state = {
    message: ''
  }
  render(){
    return (
      <div>
        <h1>이벤트 </h1>
        <input type = "text" 
        name = "message"
        value = {this.state.message}
        onChange={
          (event) => {this.setState({
            message: event.target.value
          })
        }
      }
    ></input>
      </div>  
    )
  }
}

export default Event

버튼으로 입력값 확인

import React, { Component } from 'react'

class Event extends Component{
  state = {
    message: ''
  }
  render(){
    return (
      <div>
        <h1>이벤트 </h1>
        <input type = "text" 
        name = "message"
        value = {this.state.message}
        onChange={
          (event) => {this.setState({
            message: event.target.value
          })
        }
      }
    ></input>
    <button onClick={() => {
        console.log(this.state.message)
        this.setState({
            message: ''
        })
      }
    }>체크</button>
    </div>  
    )
  }
}

export default Event

임의 메서드 만들기

import React, { Component } from 'react'

class Event extends Component{
  state = {
    message: ''
  }
constructor(props){
  super(props)
  this.handleChange = this.handleChange.bind(this)
  this.handleClick = this.handleClick.bind(this)
}

handleChange(event){
  this.setState({
    message: event.target.value
  })
}

handleClick(){
  console.log(this.state.message)
  this.setState({
    message: ''
  })
}

render(){
  return (
    <div>
      <h1>이벤트 </h1>
        <input type = "text" 
        name = "message"
        value = {this.state.message}
        onChange={
          (event) => {this.setState({
            message: event.target.value
          })
        }
      }
    ></input>
    <button onClick={() => {
        console.log(this.state.message)
        this.setState({
            message: ''
          })
        }
      }>체크</button>
    </div>  
    )
  }
}

export default Event

input 여러 개 받아 출력

import React, { Component } from 'react'

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

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

handleClick = () =>{
  console.log(this.state.username + ':' + this.state.message)
  this.setState({
    username: '',
    message: ''
  })
}

render(){
  return (
    <div>
      <h1>이벤트 </h1>
      <input type = "text" 
      name = "username"
      value = {this.state.username}
      onChange = {this.handleChange}
    />
    <input type = "text" 
      name = "message"
      value = {this.state.message}
      onChange = {this.handleChange}
    />
    <button onClick={this.handleClick}>확인</button>
    </div>  
    )
  }
}

export default Event