[개념 정리] useState

* 작성 이유

▶ React를 사용하면서 React Hooks를 제대로 설명하지 못하는 것 같아 정리
▶ 참고한 강의(별코딩)

* 정리

* State

▶ 컴포넌트가 가지는 상태

* useState

▶ State를 간편하게 생성, 업데이트 제공
▶ state와 setState를 배열 형태로 리턴함

const [state, setState] = useState(초기값);
▶ state : 현재 상태값
▶ setState : state를 변경시켜주고 싶을 때 이용

▶ setState로 state 변경 시 해당 컴포넌트는 화면에 다시 렌더링됨
▶ setState로 변경하는 값이 이전 state와 연관이 있는 경우
-> setState에 인자로 새로운 state를 리턴하는 콜백함수 넣어줌

 const handleUpload = () => {
    setNames((prevState) => {
      console.log("prevState", prevState);
      return [input, ...prevState];
    });
  };

▶ useState를 사용해서 초기값을 받아올 때 무거운 일을 하는 경우
-> useState에 인자로 콜백함수 넣어줌
-> 맨 처음 렌더링이 될 때만 실행 가능

* 예제 1

import { useState } from "react";

const App = () => {
  const [time, setTime] = useState(1);

  const handleClick = () => {
    let newTime;
    if (time >= 12) {
      newTime = 1;
    } else {
      newTime = time + 1;
    }
    setTime(newTime);
  };

  return (
    <div>
      <span>현재 시각 : {time}시</span>
      <button onClick={handleClick}>Update</button>
    </div>
  );
};

export default App;

* 예제 2

▶ 초기값을 가져올 때 무거운 작업을 해야 하는 경우
▶ 콜백형태로(맨 처음 렌더링 될 때만 나옴)

import { useState } from "react";

const heavyWork = () => {
  console.log("엄청 무거운 작업");
  return ["홍길동", "김민수"];
};

const App = () => {
  const [names, setNames] = useState(() => {
    return heavyWork();
  });
  const [input, setInput] = useState("");

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

  const handleUpload = () => {
    setNames((prevState) => {
      console.log("prevState", prevState);
      return [input, ...prevState];
    });
  };

  return (
    <div>
      <input type="text" defaultValue={input} onChange={handleInputChange} />
      <button onClick={handleUpload}>업로드</button>
      {names.map((name, index) => {
        return <p key={index}>{name}</p>;
      })}
    </div>
  );
};

export default App;