밍부스35) 돌고돌아 다시 setState...

문제상황은 이렇다
무한스크롤기능을 구현하던 중
페이지 끝에 스크롤이 닫을때마다 page 스테이트를 1씩 증가해주는 코드를 짰다.
하지만 아래 사진과 같이 1이었던 숫자가 2가되고, 2가 다시 1이 된다.
왜그럴까....

const [state, setState] =useState(1) 
.
.
.
setState(state+1) 

다양한 방법으로 에러를 해결하던중

setState((prev)=>prev+1)

이 방식으로 스테이트 변경을 하였더니, 변경이 잘 되었다.
이 둘의 차이는 무었일까??
그리고 나는 이방법을 왜 몰랐을까

setState vs state prev

setState는 비동기적으로 작동한다.
setState는 자기만의 고유한 임시저장 공간을 가지고 있다.
setState가 실행시 임시저장 공간에 저장하고, 그 데이터는 변하지 않고 2만가지게 된다.
그리고 그 함수가 끝나면 화면에 렌더링이 된다.

반면에 prev는 setState임시저장 공간에 있는 데이터를 바로 가져와 실행시켜 줄 수 있다. prev를 이용하면 리팩토링을 하는데 용이하다고 한다.
또한 이전 스테이트 값을 사용하고 싶을때 이 방법을 사용한다고 한다.

정리를 해보자면

무한스크롤이라는 스크롤 이벤틀르 사용하고 있어서 스크롤이 될때마다 렌더링이 되는 특수한 환경에 있어서 setState(state+1)을 했을때 1 => 2=>1 로 스테이트가 변경되었던 이유는 실제 데이터는 그대로 1를 유지하고 있어서 돌아갔던 것이고, prev를 사용시 이전의 값으로 바로 가져오기 때문에 1=>2=>3이렇게 증가 할 수 있었던게 아닐까 싶다.