setState(count + 1); // 계속 state가 1로 고정
setState(count => count + 1); // updater function을 이용하면 계속 갱신가능
리액트 권위자(?) Dan Abramov에 의하면, 이 현상은 setInterval과 리액트의 근본적인 차이에 기반한다.
리액트 컴포넌트의 props와 state는 계속해서 변화할 수 있다.
이 때 리액트 컴포넌트는 저번 렌더링 상태를 모두 잊어버리고, 새로운 상태를 가지고 다시 렌더링한다.
반면 setInterval은 한 번 설정되면 clearInterval을 하는 것 말고는 아무런 변경을 할 수가 없다.
그래서 interval 타이머를 직접 갈아주지 않는 이상, 처음의 props와 state를 계속 참조하고 있는 것.
setCount(count => count + 1)처럼 updater function을 사용해서 setCount를 해주면 문제는 해결된다.
updater function을 사용하면 항상 신선한(fresh) 상태값을 가져올 수 있기 때문.
* setState는 비동기로 동작한다.
때문에, 한 번에 여러 개의 setState를 사용하면 그 update들을 모두 queue에 담았다가,
더 이상 setState가 없을 때 queue에 있는 모든 update들을 실행시키고, 이후에 리렌더링이 실행된다.
아마 쓸데없는 렌더링을 줄이고, 모든 변화를 반영한 한 번의 렌더링으로 효율성을 높이기 위한 것이리라.
그래서 여러 번의 setState를 사용할 때, 순서대로 변경이 일어나게 하기 위한 방법으로
'updater function' 형식이 사용된다. setState 내부에 콜백 함수를 사용해주는 것.
ㅠㅠ