import { useState } from "react";
export default function useStatePractice() {
const [time, setTime] = useState(1);
const heavyWork = () => {
console.log("무거운 작업이라면...");
return [];
};
const [inputValue, setInputValue] = useState("");
const [names, setNames] = useState(() => {
return heavyWork();
});
const onClickTimeUpdate = () => {
let newTime;
if (time >= 12) {
newTime = 1;
} else {
newTime = time + 1;
}
setTime(newTime);
};
const onChangeName = (e) => {
setInputValue(e.target.value);
};
const onClickNameUpload = () => {
setNames([inputValue, ...names]);
};
const onClickNameUpload2 = () => {
setNames((prev) => {
return [inputValue, ...prev];
});
};
return (
<div>
<div>useState 연습하기!!</div>
<hr />
<div>시간 업데이트</div>
<span>현재시각: {time}</span>
<button onClick={onClickTimeUpdate}>update</button>
<hr />
<div>이름 업로드</div>
<input placeholder="이름을 입력하세요" onChange={onChangeName} />
<br />
<button onClick={onClickNameUpload}>이름 업로드 [state 얕은복사]</button>
<br />
<button onClick={onClickNameUpload2}>
이름 업로드 [prev 콜백함수 얕은복사]
</button>
{names?.map((name, idx) => {
return <p key={idx}>{name}</p>;
})}
</div>
);
}