[React Hooks]useState

useState

 

state는 상태. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 해줄 수 있는 도구. state를 setState로 변경해준다. 

setState로 상태를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다. 

 

import { useState } from "react";

const heavyWork = () => {
  console.log("무지하게 무거운 함수");
  return ["홍길동", "김민수"];
};

function App() {
  // 초기값이 이렇게 무거운 작업을 하는 함수라면 맨 처음 렌더링 시에만 불러주고 싶다.
  // const [names, setNames] = useState(heavyWork());
  // 그러면 이렇게 아래처럼 콜백함수를 인자로 줘야한다.
  const [names, setNames] = useState(() => {
    return heavyWork();
  });

  const [input, setInput] = useState("");

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleUpload = (e) => {
    // 갱신해 줄 값이 이전에 이미 존재하는 state와 밀접하게 연결되어있으면 callback 함수를 전달한다.
    setNames((prev) => {
      console.log("이전 state", prev);
      return [input, ...prev];
    });
  };

  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;