[๋ฆฌ์กํธ Hook] useState ๋ก ์ฌ์ฉ์ ์ ๋ ฅ ๊ฐ์ ์ด์ฉํ์ฌ ๋ฐฐ์ด ๋ ๋๋ง ํ๊ธฐ.
์ง๋ ์๊ฐ ์ฐ๋ฆฌ๋ useState๋ฅผ ์ด์ฉํ์ฌ ํจ์ํ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๋ถ์ฌํ๊ธฐ์ ๋ํด์ ์์๋ณด์๋ค.
ํ์ง๋ง ์ง๋ ์๊ฐ useState์ ๋ํด์ ๋ง๋ง ๋ดค๊ธฐ ๋๋ฌธ์ ์์ง ์ค์ ์์ useState๋ฅผ ์ฌ์ฉํ๊ธฐ์๋ ํฑ์์ด ๋ถ์กฑํ ๊ฒ ๊ฐ๋ค๋ ๋๋์ ๋ฐ์๋ค.
์ค๋์ useState์ ๋ํด์ ํ์คํ ์ดํดํด๋ณด๊ณ ์ด๋ป๊ฒ ์ฌ์ฉํ ์ ์์์ง ์์๋ณด๋ ์๊ฐ์ ๊ฐ์ ธ๋ณด์.
์ต์ข ๊ฒฐ๊ณผ๋ฌผ
์ฐ๋ฆฌ๊ฐ ์ด๋ฒ ์๊ฐ ์ต์ข ์ ์ผ๋ก ๋ง๋ค ๊ฒ์ ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ฐ๋ผ์ ๋ฐฐ์ด์ ๋ง๋ค๊ณ ์ด๋ฅผ ์ถ๋ ฅํ๋ ํ๋ฉด์ ๊ตฌ์ฑํด ๋ณผ ๊ฒ์ด๋ค.
๊ฒฐ๊ณผ๋ฌผ์ ์๋ง ์ด๋ ๊ฒ ๋์ฌ๊ฒ์ด๋ค.
์์
- ์ ๋ ฅ(input form) ํผ ์์ฑ
- input ํผ์ onChange ๋ฉ์๋ ๊ตฌํ
- useState๋ฅผ ์ด์ฉํ์ฌ state๋ฅผ ๋ณ๊ฒฝ
- ์ฌ์ฉ์ ์ถ๊ฐ ๋ฒํผ์ onClick ๋ฉ์๋ ๊ตฌํ
- ๋ฐฐ์ด ๋ ๋๋ง
์ ๋ ฅ ํผ ์์ฑ (input form)
์ฐ์ ์ ๋ ฅ ํผ์ ๋ง๋ค์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ์๋์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํด๋ณด์.
import React, { useState } from 'react';
const Test = () => {
const [username, setUsername] = useState("")
const [userAge, setUserAge] = useState("")
return (
<div>
<h1>์ฌ์ฉ์๋ฅผ ์
๋ ฅํ์ธ์!</h1>
<div>
<input type="text" name="userName" />
<input type="text" name="userAge" />
</div>
</div >
);
}
export default Test;
์ฌ๊ธฐ์ useState๊ฐ ์ฐ์๋ค.
์ฐ๋ฆฌ๋ <button>
์ผ๋ก input ํผ์ ์
๋ ฅ๋ ๊ฐ๋ค์ ๋ฐฐ์ด์ ์ถ๊ฐ์ํฌ ๊ฒ์ด๋, input์ ์
๋ ฅ๋ ๊ฐ๋ค์ state๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ด ๋ฐ๋์ง ํ๋ค.
์ฌ๊ธฐ์ username
๊ณผ userAge
๋ React์ Hook์ผ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
๊ฐ๊ฐ์ state๋ฅผ ์ด๊ธฐ ๋น์ด์๋ ๊ฐ์ผ๋ก ์ด๊ธฐํ๋ฅผ ํด์ค๋ค.
input ํผ์ onChange ๋ฉ์๋ ๊ตฌํ
์ด์ input ํผ๊ณผ state๋ฅผ ์ฐ๊ฒฐ์์ผ์ผ ํ๋ค๊ณ ํ์ผ๋, input์ onChange ๋ฉ์๋๋ฅผ ๊ตฌํํด๋ณด์.
onChange ๋ฉ์๋๋ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๋ผ ๊ฐ๊ฐ์ state (username, userAge)๋ฅผ ๋ณํ์ํค๋ ๊ฒ์ด๋ค.
๋ค์๊ณผ ๊ฐ์ด handleOnChange
๋ฉ์๋๋ฅผ ์์ฑํ๊ณ input
์์ฑ์ onChange
์์ฑ์ ๋ฃ์ด์ฃผ์.
import React, { useState } from 'react';
const Test = () => {
const [username, setUsername] = useState("")
const [userAge, setUserAge] = useState("")
const handleOnChange = (e) => {
console.log(e.target.name + ": " + "now changed");
}
return (
<div>
<h1>์ฌ์ฉ์๋ฅผ ์
๋ ฅํ์ธ์!</h1>
<div>
<input type="text" name="userName" onChange={handleOnChange} />
<input type="text" name="userAge" onChange={handleOnChange} />
</div>
</div >
);
}
export default Test;
๊ทธ๋ฆฌ๊ณ input์ ๊ฐ์ ๋ฃ์ผ๋ฉด ์๋์ ๊ฐ์ด ๋์ํ๋ค.
ํ์ง๋ง ์ฌ๊ธฐ์ ์กฐ๊ธ ์์ํ ๋ฌธ์ฅ์ด ๋ํ๋ฌ๋ค.
const handleOnChange = (e) => {
console.log(e.target.name + ": " + "now changed");
}
์ฌ๊ธฐ ๋ณด๋ฉด handleOnChange
๋ฉ์๋์ ๋งค๊ฐ๋ณ์๋ก e๊ฐ ๋ค์ด๊ฐ๊ณ ์ฐ๋ฆฌ๋ ์ฝ์์ e.target.name
์ ์ถ๋ ฅ์์ผฐ๋ค.
์ฌ๊ธฐ์ ๋ง ํ๋ e๋ ์ด๋ฒคํธ ์์ฑ์ธ๋ฐ, Event ์์ฑ์ ๋ง์ฐ์ค๋ฅผ ํด๋ฆญํ๊ฑฐ๋ ํค๋ณด๋๋ฅผ ๋๋ฅด๋ ๋ฑ ์ฌ์ฉ์ ์ก์ ์ ์ํด ๋ฐ์ํ๋ ์์ฑ์ด๋ค.
๊ทธ ์์ฑ์๋ ์ฌ๋ฌ ๊ฐ๋ค์ด ๋ด๊ฒจ์๋๋ฐ, ๊ทธ ์ค์์ e.target
์ event๊ฐ ์ ๋ฌํ ๊ฐ์ฒด์ ๋ํ ์ฐธ์กฐ์ด๋ค.
์ฐ๋ฆฌ๋ event๊ฐ ์ ๋ฌํ ๊ฐ์ฒด์ name์ผ๋ก ์๋ณํ ๊ฒ์ด๋ฏ๋ก e.target.name
์ด๋ผ๊ณ ์๋ณํ๋ฉด ์ฐ๋ฆฌ๊ฐ <input type="text" name="" />
์ผ๋ก ๋ฃ์๋ name ์์ฑ์ ์ ๊ทผํ ์ ์๋ ๊ฒ์ด๋ค.
์ฐ๋ฆฌ๊ฐ ์
๋ ฅํ ๊ฐ์ input ํ๊ทธ์ value๊ฐ์ผ๋ก ์ง์ ๋๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๋ e.target
์ ์๋ value ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋ค.
๊ทธ๋ผ ์์ handleOnChagne
๋ฅผ ๋ณ๊ฒฝํด๋ณด์.
const handleOnChange = (e) => {
console.log(e.target.name + ": " + e.target.value);
}
์ด์ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๊ฐ์ ์ฌ์ฉํ ์ ์๋ค!
useState๋ฅผ ์ด์ฉํ์ฌ state ๋ณ๊ฒฝํ๊ธฐ
๊ทธ๋ผ ์๊น ์ฐ๋ฆฌ๊ฐ onChange๋ฅผ ํตํด ์ป๊ฒ๋ ์ฌ์ฉ์์ ์ ๋ ฅ ๊ฐ์ state๋ก ์ ์ฅํด๋ณด์.
์ฐ๋ฆฌ์๊ฒ 2๊ฐ์ state๊ฐ ์๋ค.
const [username, setUsername] = useState("")
const [userAge, setUserAge] = useState("")
์๋จธ ๊ฐ๊ฐ์ state๋ฅผ ๋ณ๊ฒฝ์ํค๊ธฐ ์ํ onChange ๋ฉ์๋๊ฐ 2๊ฐ๊ฐ ํ์ํ๋ค.
const handleUserNameOnChange = (e) => {
}
const handleUserAgeOnChange = (e) => {
}
์ฌ๊ธฐ์ ๊ฐ๊ฐ์ state๋ฅผ setState๋ฅผ ์ด์ฉํด์ ๋ณ๊ฒฝํ๋ฉด ๋๋ค.
const handleUserNameOnChange = (e) => {
setUsername(e.target.value)
}
const handleUserAgeOnChange = (e) => {
setUserAge(e.target.value)
}
ํ์ง๋ง ๋ง์ฝ ์ ๋ ฅ ํผ์ด 100๊ฐ๋ผ๋ฉด 100๊ฐ์ handle ๋ฉ์๋๋ฅผ ๋ง๋ค์ด์ผ ํ ๊น??
๋๋ฌด ๋ฉ์ง์ง ์๋ค.
๊ทธ๋์ ์ฐ๋ฆฌ๋ ํ๋์ ๋ฐฉ๋ฒ์ ์๊ฐํด ๋ผ ์ ์๋๋ฐ, ์
๋ ฅ ํผ์ ๊ฐ์ฒด๋ก ๋ง๋ค์ด๋ฒ๋ฆฌ๊ณ target.name
์ผ๋ก ์๋ณํ๋ฉด ๋์ง ์์๊น? ๋ผ๋ ์๊ฐ์ ํ ์ ์๋ค.
const [inputs, setInputs] = useState({
userName: "",
userAge: ""
})
๋๋ฌด ๋ฉ์ง ์๊ฐ์ธ ๊ฒ ๊ฐ๋ค.
ํ์ง๋ง ๊ทธ ์ ์ ์์์ผ ํ ๊ฒ์ด ์๋ค.
๋ฐ๋ก ์ฌ๊ธฐ์ ES6 ๋ฌธ๋ฒ์ด ์ฌ์ฉ๋๋ค.
ES6 ๋ฌธ๋ฒ๊น์ง ์ด์ผ๊ธฐํ์๋ฉด ๋๋ฌด ์ปค์ง๋ฏ๋ก ES6 ๋ฌธ๋ฒ์ ์ฌ๊ธฐ์์ ํ์ตํ๋ ๊ฒ์ ์ถ์ฒํ๋ค.
๊ทธ๋์ setInputs
์์ ๊ธฐ์กด์ input ๊ฐ๋ค์ ๋ณต์ฌํด์ฃผ๊ณ ๋ณ๊ฒฝ์ด ์ผ์ด๋ name์์ value state๋ฅผ ๋ณ๊ฒฝ์์ผ์ฃผ๋ฉด ๋๋ค.
import React, { useState } from 'react';
const Test = () => {
const [inputs, setInputs] = useState({
userName: "",
userAge: ""
})
const handleOnChange = (e) => {
setInputs({
...inputs,
[e.target.name]: e.target.value
})
}
return (
<div>
<h1>์ฌ์ฉ์๋ฅผ ์
๋ ฅํ์ธ์!</h1>
<div>
<input type="text" name="userName" onChange={handleOnChange} />
<input type="text" name="userAge" onChange={handleOnChange} />
</div>
</div >
);
}
export default Test;
์ฌ์ฉ์ ์ถ๊ฐ ๋ฒํผ์ onCLick ๊ตฌํํ๊ธฐ
์ด์ input์ ๋ค๋ค์ผ๋ ์ฌ์ฉ์๋ฅผ ์ถ๊ฐํ๋ ๋ฒํผ์ onClick์ ๊ตฌํํด๋ณด์.
์ผ๋จ ์ฌ์ฉ์๊ฐ ์ ์ฅ๋ users state๋ฅผ ๋ง๋ค์ด๋ณด์.
๊ทธ๋ฆฌ๊ณ onClick์ด ์คํ๋๋ฉด ๊ธฐ์กด์ ์๋ ์ ๋ ฅํผ์ ๊ฐ๋ค์ ์ง์์ ธ์ผ ํ๋ฏ๋ก Inputs๋ฅผ ๋น์ฐ๋ ํจ์๋ ๋ฃ์ ๊ฒ์ด๋ค.
const users = useState([]);
user state๋ฅผ ๋ง๋ค๊ณ ,
const handleOnClick = () => {
const { userName, userAge } = inputs;
// users ๋ฐฐ์ด์ ์ถ๊ฐํ user ๊ฐ์ฒด
const user = {
userName,
userAge
}
// spread ์ฐ์ฐ์ ํตํด์ ๊ธฐ์กด์ ๊ฐ์ ๋ณต์ฌํ๊ณ , users State์ ์ถ๊ฐ
setUsers([
...users,
user
])
// ์
๋ ฅ์ด ๋๋๊ณ inputs๋ฅผ ๋น์์ฃผ๋ ์ญํ
setInputs({
userName: "",
userAge: ""
})
};
๋ค์๊ณผ ๊ฐ์ onClick ๋ฉ์๋๋ฅผ ๋ง๋ค์.
์ฌ๊ธฐ์ 3๊ฐ์ง๊ฐ ์ฌ์ฉ๋์๋ค.
- user๊ฐ์ฒด
- spread ์ฐ์ฐ์ ํตํ users state ๋ณ๊ฒฝ
- inputs ๋น์์ฃผ๊ธฐ
์ด์ ๋ง์ง๋ง์ผ๋ก ๋ฐฐ์ด ๋ ๋๋ง์ ํตํ ์ถ๋ ฅ์ ํด๋ณด์.
๋ฐฐ์ด ๋ ๋๋ง
๋ฐฐ์ด์ ๋ ๋๋งํ๊ธฐ ์ํด ์๋ก์ด ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค.
const User = ({ user }) => {
return (
<div>
{user.userName} ({user.userAge})
</div>
);
}
์ด User ์ปดํฌ๋ํธ๋ user๋ฅผ ํ๋กญ์ค๋ก ๋ฐ์์์ ๋ ๋๋ง ํด์ค ๊ฒ์ด๋ค.
{users.map(user => (
<User user={user} />
))}
๊ทธ๋ผ ์ฐ๋ฆฌ๊ฐ ์๊น ์ํ๊ณ ์ ํ๋ ๊ฒฐ๊ณผ๊ฐ ์ถ๋ ฅ๋๋ค.
์ฌ์ค์ ์ด๋ฒ ํฌ์คํ ์๋ ๋ง์ ์ค๋ฅ๊ฐ ์๋ค.
๋ฐฐ์ด ๋ ๋๋ง์ ์ํ key ๊ฐ์ ์ฃผ์ง ์๋๋ค๋๊ฐ, ํน์ ๋๋ฌด ๋ง์ ๋ ๋๋ง์ผ๋ก ์ฑ๋ฅ ์ด์๋ผ๋๊ฐ
๋ง์ ๋ถ์กฑํ ์ ์ด ์์ง๋ง ์ด๋ฒ ๊ธ์ useState์ ์ด์ ์ ๋ง์ท๊ธฐ ๋๋ฌธ์ ๊น์ ๋ด์ฉ์ ๋ํด์ ์๋ตํ์์ ์๋ฆฐ๋ค.