[React] State와 Prev...?

State와 Prev

state란!
데이터를 담기 위한 상자와 같은 것인데, setState는 state를 변경할 수 있게 해주는 함수이다.

import { useState } from "react";

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

  function onClickCountUp() {
   setCount(count + 1); // state는 리액트 html에서 변경을 감지함(즉, document.get... 필요없음)
   setCount(count + 1);
   setCount(count + 1);
   setCount(count + 1);
   setCount(count + 1);
  }

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

여기서 카운트올리기 버튼을 클릭하면 setCount함수를 5번 실행했으니까 5씩 올라갈 것이라는 예상과는 달리
카운트가 1씩만 증가하게 된다.

그 이유는 setState는 불필요한 렌더링을 방지하면서 성능을 향상시키기 위해 즉시 함수를 수행하지 않도록 설계되었기 때문이다! 이러한 작동방식은 비동기적으로 작동한다고 할 수 있다.
의도대로 5씩 올라가게 하려면, prev라는 임시저장공간을 사용해서 작성해야 한다!

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

이렇게 prev를 사용하면 임시 저장공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장공간에 있는 값이 없다면 기본 값을 불러오게 된다.