State Prev?🤔

State Prev는 바로 "직전" 값을 의미한다.

State Prev가 필요한 이유?

import { useState } from "react";

export default function CounterStatePage() {
  const [count, setCount] = useState(0);

  function counter() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>카운트 올리기!!!</button>
    </div>
  );

🤔setCount(count+1)을 네번 입력한뒤 버튼을 클릭해도 결과적으로 1씩만 증가하게된다!

⭐️이 Counter 함수안에서 setState를 다섯번 주었지만, 결과는 한번만 더해진 1이 나오기 때문이다.setState의 값은 계속 초기값인 0이 들어가기 때문에,
다섯번 모두 0+1 이 된다. 누적값을 구하고 싶을때는 prev를 사용해야한다.

Prev State를 사용한 예시✍️

import { useState } from "react";

export default function CounterStatePage() {
  const [count, setCount] = useState(0);

  function counter() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // setCount((prev) => prev + 1);
    // setCount((prev) => prev + 1);
    // setCount((prev) => prev + 1);
    // setCount((prev) => prev + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>카운트 올리기!!!</button>
    </div>
  );
}

누적값이 잘 올라가는 모습