State는 리액트 전용 변수이다.
State는 값을 저장 할때 임시 저장소에 값을 저장하게 된다.
예를 들어
const [count, setCount] = useState(0)
function handleClick() {
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)
}
이런 카운터 함수가 있다고 하자
이 카운터는 숫자 5씩 증가가 아니라 숫자 1씩 증가하게 된다.
왜나하면 State 함수는 임시 저장소에 값을 저장하기 때문이다.
첫번째 줄 코드는 0 + 1이다. 1는 임시 저장소에 값을 저장한다
근데 count는 그대로 0이다.
두번째 줄 코드는 임시 저장소에 1이 있지만 count는 아직도 0이다.
그래서 다시 임시저장소에 1을 담긴다.
이렇게 반복해서 마지막 줄에 코드에 count에 1이 담겨 1이 출력 된다.
이러한 state의 문제점을 해결하려면 prev라는 임시저장공간을 사용해야 한다.
function handleClick() {
setCount((prev)=>prev+1) // 0 + 1
setCount((prev)=>prev+1) // 1 + 1
setCount((prev)=>prev+1) // 2 + 1
setCount((prev)=>prev+1) // 3 + 1
setCount((prev)=>prev+1) // 4 + 1
}
첫번째 줄에서 임시 저장소에 있는 기본값 0에서 1을 담는다.
그리고 prev를 사용하여 임시 저장소에 있는 1을 가져와서 count에 담는다.
이렇게 두번째 줄도 임시 저장소에 있는 저장값 2를 가져와서 count에 담는다
이렇게 반복하여 마지막 줄까지 실행을 하면 5가 출력이 된다.
