useState๋ Hook์ ๊ธฐ์ ์ด๋ค. ํจ์ํ ์ปดํฌ๋ํธ์์๋ ํด๋์คํ ์ปดํฌ๋ํธ์ ๊ฐ์ด state๋ฅผ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์, Hook์ ์ฌ์ฉํด์ state์ ๊ฐ์ ๊ธฐ๋ฅ์ ํ ์ ์๋๋ก ๋ง๋ค์ด์ฃผ์๋ค.
useState๋ ์ค์ ํ state ๊ฐ๊ณผ ์ด ๊ฐ์ ์ ๋ฐ์ดํธํ๋ ํจ์๋ฅผ ์์ผ๋ก ์ ๊ณตํ๋ค. ์ด ํจ์๋ ํด๋์ค ์ปดํฌ๋ํธ์์์ this.setState์ ์ ์ฌํ์ง๋ง ์ด์ state์ ์๋ก์ด state๋ฅผ ํฉ์น์ง ์๋๋ค๋ ์ฐจ์ด์ ์ด ์๋ค.
๐ const [state, setState] = useState(์ด๊ธฐ๊ฐ);
useState hook์ ์ด์ฉํ์ฌ ์๋์ ๊ฐ์ด ์์ ์ฝ๋๋ฅผ ์์ฑํด๋ณด์๋ค.
import React, { useState } from "react";
function App() {
const [names, setNames] = useState(["ํ๊ธธ๋", "๊น๋ฏผ์"]);
const [input, setInput] = useState("");
const handleInputChange = (e) => {
setInput(e.target.value);
};
//์๋ก ์
๋ฐ์ดํธ ์์ผ ์ค state๋ ์ด์ ์ ์ด๋ฏธ ์กด์ฌํ๋ state์ ๋ฐ์ ํ๊ฒ ์ฐ๊ด์ด ์๋ค.
//์ด ๊ฒฝ์ฐ setNames ์ธ์ ์์ ๋ฐ๋ก ๊ฐ์ ์ฃผ๋ ๊ฒ์ด ์๋๋ผ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ ๋ฌํด์ค๋ค.
const handleUpload = () => {
setNames((prevState) => {
return [input, ...prevState];
});
setInput(""); // upload ๋ฒํผ์ ๋๋ฅธํ input์ ๋น์นธ์ผ๋ก ํด์ฃผ๋ ์์
};
// console.log(input);
return (
<div>
<input type="text" value={input} onChange={handleInputChange} />
<button onClick={handleUpload}>Upload</button>
{names.map((name, index) => {
return <p key={index}>{name}</p>;
})}
</div>
);
}
export default App;
array.map()
array.map() ์ ๋ฐฐ์ด ๋ด์ ๋ชจ๋ ์์ ๊ฐ๊ฐ์ ๋ํ์ฌ ์ฃผ์ด์ง ํจ์๋ฅผ ํธ์ถํ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ ๋ฉ์๋์ด๋ค.
map์ index๋ก key๋ฅผ ์ก๋๋ก ์์ฑํ์๊ณ ์ ๋ ฅ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฌ๋ ์ด๋ฆ์ด ์์๋ก ์ถ๊ฐ๋๋๋ก ์ค์ ํ์๋ค.
input ์ฐฝ์ ์ค์ฝ๋ฉ๊ณผ ๊น๊ฐ๋ฐ์ ์
๋ ฅํ upload ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋์ ๊ฐ์ด list-up ๋๋๊ฒ์ ํ์ธํ ์ ์๋ค. ๐
์ถ์ฒ : [youtube] ๋ณ์ฝ๋ฉ ์ฑ๋์ ์ฐธ๊ณ ํ์ฌ ์์ฑ๋ ๊ธ์ ๋๋ค.