[State] state prev

state는 리액트 컴포넌트에서 데이터를 담기 위한 상자다!
state에 담긴 값은 함수가 끝날 때 변경이 반영된다.

state

 const onClickCount = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

위 함수가 실행되면 setCount가 4개나 있음에도 불구하고 count의 값은 1만 증가된다.
변경된 값이 바로 반영되는 것이 아니고 임시 저장공간에 넣어두고, 함수가 끝나고 나서 값이 변경되기 때문이다ㅜㅜ

prev

이럴 때 prev를 사용하면 임시 저장공간에 있는 값을 꺼내올 수 있다!!
임시 저장공간에 값이 없으면 기본값을 가져온다.
(prev) 대신 (prevState)로 써도 된다.

  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };

이렇게 prev를 이용해야 count의 값이 setCount로 증가시킨 횟수만큼 증가한다.