Event Handling

Event handling in Hooks

Result:

방법 1 (OnChange 를 2개를 만들어서 실행)

input 이 두개 일때는 괜찮은 코드

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)
    setUsername("")
    setMessage("")
  }
  const onKeyPress = (e) => {
    if (e.key === "Enter") {
      onClick()
    }
  }
  return (
    <div>
      <h1>Event handling</h1>
      <input
        type="text"
        name="username"
        placeholder="username"
        value={username}
        onChange={onChangeUsername}
      />
      <input
        type="text"
        name="message"
        placeholder="type anything"
        value={message}
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>Submit</button>
    </div>
  )
}

방법 2 (OnChange 1개로 실행)
많은 input 이 있을경우

[e.target.name]:e.target.value 사용

const EventPractice = () => {
  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 onKeyPress = (e) => {
    if (e.key === "Enter") {
      onClick()
    }
  }
  return (
    <div>
      <h1>Event Practice</h1>
      <input
        type="text"
        name="username"
        placeholder="username"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="type anything"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>Submit</button>
    </div>
  )
}

알면 좋은거!!!

[e.target.name]: e.target.value 가 뭐지???

Dynamic (동적) 으로 코드를 사용하게 도와주는것으로 모든 e.target.name 들의 값을 가져오는 거다.

<input type="text" name="title" onChange={this.onTitleChange} value={this.state.title} />
<input type="text" name="address" onChange={this.onDescriptionChange} value={this.state.address} />
<input type="text" name="description" onChange={this.onAddressChange} value={this.state.description} />

onTitleChange (e) {
   this.setState({ title : e.target.value});
}
onAddressChange (e) {
   this.setState({ address : e.target.value});
}
onDescriptionChange (e) {
   this.setState({ description : e.target.value});
}

반복되는 코드는 Dry (Don't repeat yourself) 의 줄임말로 코드는 반복적으로 하는것이 안좋다!!!