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) 의 줄임말로 코드는 반복적으로 하는것이 안좋다!!!