State(복습)

state에 관한 내용이 다시 등장했다..
여기서 한번 더 state에 대해 설명하자면 state는 리액트 컴포넌트에서 데이터를 담기위한 상자라고한다. 이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 화면에 반영이 되는 특징을 가지고 있었다

function countUp() {
	setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
}

이러한 함수가 있다고 가정해보자. 우리가 원하는 모습은 버튼을 한번 클릭했을때 카운트가 5번 되는 모습이 나와야하는데, 1이 출력되는 모습을 볼 수 있다.
state는 함수가 모두 끝나게 되면 화면에 반영이 된다고 하였다. 첫번째 줄에서 1이 상자에 담겼지만 아직 함수가 끝나기 전이므로 여전히 count는 0 이므로 1이 상자에 담기는 모습이 계속 반복이 되서 최종적으로는 마지막 줄에 담겨있는 1이 화면에 반영되는것이다.

이런 문제는 어떻게 해결할까?

state prev

function countUp() {
	setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
}

prev를 사용하게 되면 임시 저장공간에 있는 값을 먼저 꺼내 올수가 있다.
이렇게 되면 임시저장공간에 있는 prev의 값을 계속 누적시키는 방식이 되어서 결국에는 최종적으로 우리가 원하는 5가 카운트되는 모습을 볼 수 있다.