import { useState } from "react";
const heavyWork = () => {
console.log("엄청 무거운 작업!!!");
return ["홍길동", "김민수"];
};
function App() {
const [names, setNames] = useState(heavyWork());
const [input, setInput] = useState("");
const handleInputChange = (e) => {
setInput(e.target.value);
};
const handleUpload = () => {
setNames((prevState) => {
console.log("이전 state: ", prevState);
return [input, ...prevState];
});
};
return (
<div>
<input type="text" value={input} onChange={handleInputChange} />
<button onClick={handleUpload}>Upload</button>
{names.map((name, idx) => {
return <p key={idx}>{name}</p>;
})}
</div>
);
}
export default App;
🦕 위 코드에서 보면
const [names, setNames] = useState(heavyWork());
🦕 요롷게 F(x)
의 값으로 useState()
이 들어와있는데
저렇게되면 state
값이 변할때마다 재렌더링이 된다 !
그 러 나
const [names, setNames] = useState(()=>heavyWork());
🦕 이렇게 callBack F(x)
를 사용하면 재렌더링이 되지 않는다고 합니다
🤷♂️ 나니 ? 왜죠 ?
🙎♂️ 나는 이 정리를 위한 멋진 문서를 알고 있는데 여백이 좁아 기록할 수가 없다
는 뻥이고 요것 (aka 공식문서)를 보면 알 수 있다.
더 이상의 설명은 거절한다
도움 출처 : 별코딩 유튜브, (구)팀장님✨
어떻게 된게 배우면 배울수록 어렵고 모르는게 많은지 모르겠지만 !
그래도 매우 흥미롭다 (재미...는 모르겠음)
프로젝트 다시 시작하게 됐는데, 역시 팀플하니까 너무 좋다 !
혼자 공부할 때 보다 더 잘되는 느낌 ? (물론 다들 잘 도와주셔서....! 🙏)
우리팀에서 나만 잘하면 된다 정말루 🥺