useState prev

React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다.

아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다.

import { useState } from "react";
export default function StatePrevPage() {
  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount(count + 1);
    setCount(count + 3);
    setCount(count + 5);
    setCount(count + 7);
  };
  return (
    <div>
      <div>Count:{count}</div>
      <button onClick={onClickCount}>Count Up</button>
    </div>
  );
}

하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다.
받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아오기 때문에 벌어지는 일이다.
그래서 이를 방지하기 위해 prev라는 기능을 사용한다.

아래와 같이 코드를 사용하면 16이 정상적으로 올라가는 것을 확인할 수 있다.

import { useState } from "react";
export default function StatePrevPage() {
  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };
  return (
    <div>
      <div>Count:{count}</div>
      <button onClick={onClickCount}>Count Up</button>
    </div>
  );
}