사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것

• onmouseover (hover)
• onclick
• onchange ( form)

주의점

• 카멜 표기법으로!
  • onClick ..
• 이벤트에 실행할 함수 형태의 값을 전달한다.
• 컴포넌트 자체에는 이벤트 생성 불가
  • <div> 같은 DOM 요소에만 이벤트 설정 가능
  • <MyComponent onClick={doSomething}/>
  • <div onClick={this.props.onClick}> 처럼 props로 보내주면 설정은 가능

이벤트 생성

import React,{Component} from "react";

class EventPractice extends Component{
  render(){
    return(
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="입력하세요"
          onChange={
            (event)=> {console.log(event)}
          }
        />
      </div>
    )
  }
}
export default EventPractice

onChange

onChange={ (event)=> {console.log(event)}}

→ 이벤트 함수는 함수형으로 작성이 되어야 한다.

→ 우리가 적는 값은 event.target.value에 있다

state에 input 값 담기

state={val : ""} ⇒ state 초깃값 설정

onChange= {()⇒ {this.setState ({val: event.target.value}) }}

⇒ SetState로 state값 바꿔주기

onClick

<button
	onClick={()=>{
	  alert(this.state.message)
	  this.setState({message:''})
	}
}>빈값만들기</button>

사용 방법은 동일하다

임의 메서드 만들기

이벤트 내용이 태그 안에 적혀 있으면 복잡해서 함수를 미리 준비하여 전달

가독성이 높아진다.

state ={..}
constructor(props){
	super(props)
	this.handleChange = this.handleChange.bind(this)
	this.hancleClick = this.handleClick.bind(this)
}
handleChange(e){
    this.setState({
      message:e.target.value
    })
  }
handleClick(){
  alert(this.state.message)
  this.setState({
    message:""
  })
}

<input
  type="text"
  name="message"
  placeholder="입력하세요"
  onChange={this.handleChange}
  value={this.state.message} />
<button onClick={this.handleClick}>

1. props로 함수를 등록한다

   1. 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 가리키기 위해

      메서드를 this와 바인딩 하는 작업이 필요하다 . → 안하면 this = undefined

2. 이벤트핸들러에서 사용할 때 . this.함수명 으로 사용한다.

constructor 안쓰기

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

함수 내용만 arrow function으로 사용하면 constructor 없이도 사용가능하다

input 여러개 다루기

[e.target.name]

state={
    username :"",
    message : "기본값",
    fix :'고정'
 }
handleChange = (e)=>{
    console.log(e.target)
    this.setState({
      [e.target.name]:e.target.value
    })
}
<input
  type="text"
  name="username"
  placeholder="사용자명"
  value={this.state.username}
  onChange={this.handleChange}
/>
<input
  type="text"
  name="message"
  placeholder="입력하세요"
  onChange={this.handleChange}
  value={this.state.message}
/>

handleChange함수에서 setState의 내용이 중요하다

this.setState{[e.target.name] : e.target.value}

• 해당 인풋의 name 을 나타낸다
• 객체 안에서 key를 [ ] 로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key로 사용

  const name = "헤이헤이"
  const object = {
  	[name]:'value'}

  결과 : { "헤이헤이" : "value"}
  

onKeyPress

enter를 누르는 등의 이벤트를 처리

handleKeyPress= (e)=>{
    if (e.key ==="Enter"){
    this.handleClick()
    }
 }

함수 컴포넌트로 구현하기

import React, {useState} from "react";

const EventPractice = () =>{
  const [username,setUsername] = useState('')
  const [message,setMessage] = useState('')
  const onChangeUsername = e => setUsername(e.target.value)
  const onChangeMessage = e => setMessage(e.target.value)
  const onClick = () =>{
    alert(username+":"+message)
    setMessage('')
    setUsername('')
  };
  const onKeyPress = (e) =>{
    if (e.key==="Enter"){
      onClick()
    }
  }
  return (<div>
    <h1>이벤트 연습</h1>
    <input
      type="text"
      name="username"
      placeholder="사용자명"
      value={username}
      onChange={onChangeUsername}
    />
    <div className="inputprac">
      <input
        type="text"
        name="message"
        placeholder="입력하세요"
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
        value={message}
      />
      <p>{username}</p>
      <p>{message}</p>
    </div>
    <button
      onClick={onClick}
    >확인</button>
  </div>)
}

export default EventPractice

object를 state로 사용하기

const [form,setForm] = useState({
    username:'',
    message:''
});

const {username,message} = form

const onChange = e=> {
    const nextForm = {
      ...form,
      [e.target.name]:e.target.value
    };
    setForm(nextForm)
  }

const onClick = () =>{
    alert(username+":"+message)
    setForm({
      username:'',
      message:"",
    })
  };

const [form,setForm] = useState({오브젝트 내용})

const {username,message} = form 등록 후 사용하기

const nextForm = { ...form , [e.target.name] : e.target.value}

→ form을 복사해서 새로운 값 만들고, 내용 수정하기

setForm(nextForm) 새 복사본으로 form 수정하기