리μ‘νΈλ₯Ό μ°λ€ 보면 μ΄λ¦, μ΄λ©μΌ, λΉλ°λ²νΈ λ± μ
λ ₯νλκ° μ¬λ¬ κ°μΈ κ²½μ°κ° μκΉλλ€. κ·Έλ΄ λλ§λ€ useState
λ₯Ό νλμ© λ§λ€λ©΄ λ무 볡μ‘ν΄μ§κ² μ£ ?
μ€λμ κ°μ²΄ μνλ₯Ό μ¬μ©ν΄μ μ¬λ¬ μ λ ₯κ°μ νλμ μνλ‘ κ΄λ¦¬νλ λ°©λ²μ λ°°μλ΄ μλ€!
1. π¨βπ©βπ§βπ¦ μνλ₯Ό κ°μ²΄λ‘ λ§λ€μ΄μ
μλμ κ°μ΄ form
μνλ₯Ό κ°μ²΄ ννλ‘ λ§λ€κ³ , κ° μ
λ ₯ νλμ μ΄λ¦μ ν€(key)λ‘ μ¬μ©ν©λλ€.
const [form, setForm] = useState({
name: '',
email: ''
});
μ΄μ μ λ ₯κ°μ΄ λ°λ λλ§λ€ ν΄λΉ ν€λ§ μ λ°μ΄νΈνλ©΄ λΌμ!
2. βοΈ onChange ν¨μ μ¬μ¬μ©νκΈ°
λͺ¨λ input
μ κ°μ handleChange
ν¨μλ₯Ό μ°κ²°ν΄λ λ©λλ€. e.target.name
μ νμ©ν΄ μ΄λ€ νλκ° λ°λμλμ§ μλμΌλ‘ ꡬλΆνκ±°λ μ.
function handleChange(e) {
const { name, value } = e.target;
setForm(prev => ({
...prev,
[name]: value
}));
}
μ΄μ name="email"
λλ name="name"
μμ±λ§ μ λΆμ΄λ©΄ μμ±!
3. π§ͺ μ 체 μμ μ½λ
function SignupForm() {
const [form, setForm] = useState({
name: '',
email: ''
});
function handleChange(e) {
const { name, value } = e.target;
setForm(prev => ({
...prev,
[name]: value
}));
}
return (
<div>
<input
name="name"
value={form.name}
onChange={handleChange}
placeholder="μ΄λ¦"
/>
<input
name="email"
value={form.email}
onChange={handleChange}
placeholder="μ΄λ©μΌ"
/>
<p>
μ΄λ¦: {form.name} <br />
μ΄λ©μΌ: {form.email}
</p>
</div>
);
}
πΌοΈ μν μ λ°μ΄νΈ νλ¦λ
μλ κ·Έλ¦Όμ μ λ ₯κ°μ΄ κ°μ²΄ μνμ μ μ₯λκ³ , ν΄λΉ κ°μ UIμ λ°μνλ κ³Όμ μ 보μ¬μ€λλ€:

π ν΅μ¬ μμ½
- μ¬λ¬ μ λ ₯κ°μ κ°μ²΄λ‘ λ¬Άμ΄μ μν κ΄λ¦¬νλ©΄ ν¨μ¬ κ°λ¨ν΄μ
name
μμ±κ³Όe.target.name
μ νμ©νλ©΄ onChange ν¨μ μ¬μ¬μ©μ΄ κ°λ₯ν΄μ...prev
λ‘ μ΄μ κ°μ 보쑴ν ν μ λ°μ΄νΈνμΈμ