REACT 폐관수련ing

뜻밖의 useState 발견

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 공식문서)를 보면 알 수 있다.
더 이상의 설명은 거절한다

도움 출처 : 별코딩 유튜브, (구)팀장님✨

오늘의 일기

어떻게 된게 배우면 배울수록 어렵고 모르는게 많은지 모르겠지만 !
그래도 매우 흥미롭다 (재미...는 모르겠음)

프로젝트 다시 시작하게 됐는데, 역시 팀플하니까 너무 좋다 !
혼자 공부할 때 보다 더 잘되는 느낌 ? (물론 다들 잘 도와주셔서....! 🙏)

우리팀에서 나만 잘하면 된다 정말루 🥺

Sae Eleisa Tera Vi