State Prev

State의 기본 개념은 변수의 상태를 바꿔주는 것,일종의 데이터를 담는 상자
어떤 함수 안에 setState를 여러번 넣게 되면 함수가 실행되는 동안 마지막 setState를 제외하고는 임시 저장 공간에 넣어놓고(실제로 바뀌지 않음) 마지막에 setState를 실행한 뒤 state 변수의 값을 변경한다.

만약에 임시 저장 공간에 넣었을 때 실제로 값이 바뀌도록 하려면?
이 때 prev를 사용한다.

import { useState } from "react";

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

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

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>count up</button>
    </div>
  );
}
//결과: 한 번에 4씩 증가

state 리렌더링에서 썼던 카운터 코드를 활용했다.
원래는 setCount(count+1)를 여러번 써도 count의 값은 마지막에만 변경되고 리렌더링이 되는데, prev라는 인자를 넣어서 적용하면 prev가 임시 저장 공간 변수가 되어 상태 값을 그때그때 바꿔준다.
만약 임시 저장 공간에 값이 없다면 기본 값을 불러온다.

위 코드의 경우 prev를 이용해서 그때그때 1씩 더하기 때문에 브라우저 화면에는 한번에 4씩 더하는 것으로 보일 것이다.