State와 Prev

state와 prev

State란, 리액트 컴포넌트에서 데이터를 담기 위한 상자(변수)이다. 이 상자에 담긴 내용은 함수가 모두 끝나고 나면!! 화면에 반영된다. 다음과 같이 숫자를 세는 카운터가 있다.

import { useState } from "react";

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>state 활용하여 count 증가시키기</button>
    </div>
  );
}

위의 코드를 화면에 출력하면, “state를 활용하여 count 증가시키기” 버튼을 클릭할 때마다 1씩 증가하면서 정상적으로 반영된다. 그런데 setCount(count + 1)을 다섯 번 써주게 되면, count가 다섯 개씩 증가하게 될까??

import { useState } from "react";

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

  function handleClick() {
    setCount(count + 1); // 현재 카운트는 0 + 1이므로 1이 상자에 담김
    setCount(count + 1); // 함수가 종료되기 전이므로 count가 0이라 1이 상자에 담김
    setCount(count + 1); // 위와 동일
    setCount(count + 1); // 위와 동일
    setCount(count + 1); // 위와 동일
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>state 활용하여 count 증가시키기</button>
    </div>
  );
}

그렇지 않다. 맨 위에서 말했듯, 상자에 담긴 내용은 함수가 모두 끝나게 되면 반영되기 때문에 결국 setCount(count + 1)을 한 번 써준 것과 동일한 결과가 나온다. 만약 5가 증가하도록 의도했다면, prev라는 임시 저장 공간을 이용해서 작성해야 한다!

import { useState } from "react";

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

  function handleClick() {
    serCount((prev) => prev + 1); // 임시 저장공간의 0(기본값, prev)에 1을 더한 결과인 1이 상자에 담김
    serCount((prev) => prev + 1); // 임시 저장공간의 1(기본값, prev)에 1을 더한 결과인 2이 상자에 담김
    serCount((prev) => prev + 1); // 임시 저장공간의 2(기본값, prev)에 1을 더한 결과인 3이 상자에 담김
    serCount((prev) => prev + 1); // 임시 저장공간의 3(기본값, prev)에 1을 더한 결과인 4가 상자에 담김
    serCount((prev) => prev + 1); // 임시 저장공간의 4(기본값, prev)에 1을 더한 결과인 5가 상자에 담김
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>state 활용하여 count 증가시키기</button>
    </div>
  );
}

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