State prev

이전에 state에 대해서 포스팅 했었다.

참고 : https://velog.io/@rlatjsdn147/React-State-props

이전 포스팅에서의 예제 코드이다

function App() {
  let count = 0;
  const increase = () => {
    count = count++
  }
  return (
    <main>
      <div>0</div>
      <button onClick={increase}>누르면 숫자가 올라감</button>
    </main>
  );
}

만약 이상태에서 count값을 5씩 올려주려는 의도로 아래와 같이 적으면 어떻게 될까?

function App() {
  let count = 0;
  const increase = () => {
    setCount( count + 1 )
    setCount( count + 1 )
    setCount( count + 1 )
    setCount( count + 1 )
    setCount( count + 1 )
  }
  return (
    <main>
      <div>0</div>
      <button onClick={increase}>누르면 숫자가 올라감</button>
    </main>
  );
}

실행 해보면 알겠지만 1씩밖에 올라가지 않는다.

state는 불필요한 렌더링을 방지하기 위해 비동기적으로 작동되기 때문에 이렇게 작동하는 것이다.

그렇다면 의도대로 5씩 증가하게 하려면 어떻게 해야될까?

바로prev라는 임시 저장 공간을 활용하는 것이다.

prev를 사용해서 count가 5씩 올라가게 만든 코드는 다음과 같다.

export default function New() {
	const [ count, setCount ] = useState(0)
    
    const handleClick = () => {
		setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
	}
    
    return (
    	<div>
        	<h1>{count}</h1>
        	<button onClick={handleClick}>state를 사용하여 count증가</button>
      	</div>
    )
    
}

코드가 실행되는 과정은 다음과 같다.

첫 번째 코드 setCount( (prev) => prev + 1 )부터 분석해보자.
1. const [ count, setCount ] = useState(0)에서 선언 된 count의 값 0을 prev라는 임시저장 공간에 담는다.
2. 임시저장공간에 담긴 prev에 + 1을 한 후 다시 임시저장공간 prev에 담는다.
3. prev에 + 1한 후 다시 prev에 담는다.
4. 같은 방식으로 진행하다 최종적으로 setCount( (prev) => prev + 1 )에서 4가 담긴 prev에 + 1을 하여 setCount(5)를 실행한다.