State 와 Prev

1. 함수 내에서 카운트 수 5번 증가 ( 증가 안됨 X )

function handleClick() {
   setCount(count + 1)      // 현재 count는 0 + 1 => 1을 상자에 담는다.
   setCount(count + 1)      // 1 이 상자에 담겼지만 여전히 count는 0 이므로 1이 상자에 담긴다
   setCount(count + 1)      // ...
   setCount(count + 1)      // ...
   setCount(count + 1)      // 같은 방식으로 최종적으로 1이 상자에 담겨 화면에 1이 반영된다
}

• 기본적으로 State 에 담기는 값은 해당 값이 할당되자마자 담기는 것이 아님!

• State의 값이 할당되면 그 값은 임시저장소에 들어가게 되며, 최종적으로 함수가 종료되었을 때 임시저장소에서 다시 불러와지면서 State의 값으로 할당이 됨

• 따라서 위의 코드의 결과는 count === 1

2. 함수 내에서 카운트 수 5번 증가 (증가 됨 O) Prev 활용

function handleClick() {
   setCount((prev)=>prev+1)     // 임시저장공간의 0(기본값, prev) + 1 => 1을 상자에 담는다.
   setCount((prev)=>prev+1)     // 임시저장공간에 담긴 1(prev) + 1 => 2를 상자에 담는다.
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // ...
   setCount((prev)=>prev+1)     // 같은 방식으로 최종적으로 5가 상자에 담겨 화면에 5가 반영된다
}

• setState( ) 함수에 매개변수 prev 를 넣으면 이는 곧 임시저장소에 들어가는 값이 됨

• 이 prev 를 이용해서 임시저장소 안의 데이터에 접근하여 해당 데이터의 값을 바꿔주게 되면, 아직 값이 최종적으로 할당되어 변경되지는 않았지만 함수 종료 후 할당될 데이터 자체를 변경시키는 것임으로 결과적으로 데이터는 지정한 대로 바뀌게 됨