prevState

prevState

prev란 임시저장 공간에 있던 값을 그대로 받아서 행동하는 React 도구이다.

예제를 통해 살펴보자. counter 예제를 참고하면 만약 5씩 증가시키기 위해 아래와 같이 로직을 만들었다

import { useState } from "react";

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

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

  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCount}>카운트 올리기</button>
    </div>
  );
}

위의 로직처럼 setCount(count+1)을 해주었을 때 현재 count는 정상적으로 증가하지 않는다. setCount가 실행되면서 카운트가 누적되는 것처럼 보이지만, setCount로 1증가 하고 다시 setCount로 1증가 이런식으로 진행되면서 실질적으로는 count에 1만 증가된다.

즉, setCount로 인해 count가 증가하면 그 값이 다시 전달되서 뿌려지기 때문에
첫번째 setCount만 실행된다.

이를 보완하기 위해 prev를 사용해보자.

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);
  };

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

위와 같이 prev 임시저장 공간을 사용하면 임시저장 공간에 있는 값들 하나하나 다 더해주기 때문에 클릭을 할 때마다 5씩 증가한다

즉 임시 저장 공간에 있는 값을 먼저 꺼내오고, 만약 임시 저장 공간에 있는 값이 없다면
기본 값을 불러온다.

prev를 사용하면 의도한 대로 로직을 실행할 수 있고 코드 리팩토링에도 도움이 된다.