ν° νλ‘ λ³΄κ² λλ©΄ νμκ°μ
νμ΄μ§λΌλκ° μμ½ νλ νμ΄μ§λ€μ λ³΄κ² λλ©΄ μΈνμ΄λ νΌ μ²λΌ κ°μ μ
λ ₯νλ μ°½λ€μ΄ μμ²λκ² λ§μ΄ μμ΅λλ€! κ·Έλ΄λ μΈνμ κ΄λ¦¬νκΈ°μ μ΄λ€κ² μ½λμ μΌλ‘ ν¨μ¨μ μΌκΉμ λν΄ μκΈ°λ₯Ό ν΄λ³Όλ €κ³ ν©λλ€!
λ³΄ν΅ μλμ²λΌ state
λ₯Ό μ¬λ¬κ°λ₯Ό μ μΈν΄ κ°μ κ΄λ¦¬λ₯Ό νκ² λ κ²μ΄λ€.
const [ id , setId] = useState('')
const [ pw , setPw] = useState('')
const [ email , setEmail] = useState('')
νμ§λ§ μΈνμ κ΄λ¦¬ν΄μΌν state
κ° λ λ§μμ§λ©΄ λ§μμ§μλ‘ μΌμΌν μ μΈμ ν΄μ€μΌνλ λ²κ±°λ‘μμ΄ μλλ°
μ΄κ±°λ₯Ό νλμ state
μ κ°μ²΄νμΌλ‘ μ μ₯μ΄ κ°λ₯νλ€ μμλ μλλ‘!
const [inputs, setInputs] = useState({
id: '',
pw: '',
email: '',
});
μ΄λ°μμΌλ‘ inputs
λΌλ μ€ν
μ΄νΈ κ°μ νλλ‘ λ΄μμ κ΄λ¦¬λ₯΄ ν μ μμ΅λλ€.
λ³΄ν΅ ν¨μλ μλμ²λΌ νλμ© λ€ μ μΈμ ν΄μ μ¬μ©νμκ±°λ€.
const handleId = e => {
setId(e);
};
const handlePw = e => {
setPw(e);
};
const handleEmail = e => {
setEmail(e);
};
νμ§λ§ μλμ²λΌ name
κ³Ό value
λ₯Ό μ΄μ©ν΄ νλμ ν¨μλ‘ μ¬λ¬ state
λ₯Ό 컨νΈλ‘€ κ°λ₯νλ€!
컨νΈλ‘€μ νκΈ°μν΄μ μΈν, νΌ μμ name μ΄λΌλ μμ±μ λΆμ¬ν΄μ£Όμ΄μΌνλ€.
<input type=text name=id onChange={handleInput}/>
<input type=text name=pw onChange={handleInput}/>
<input type=text name=email onChange={handleInput}/>
const handleInput = e => {
const { value, name } = e.target;
setInputs({
...inputs,
[name]: value,
});
};