React의 setState() 함수를 사용하다 보면 예상과는 다르게 실행되는 경우가 종종 있다. setState() 함수를 통해서 값을 바꾸면 값이 바로 바뀌지 않기 때문에 비동기적이라고 생각할 수 있다.
const [count, setCount] = useState<number>(0);
useEffect(() => {
setCount(1);
console.log(count); // 0이 출력된다.
}, [])위 코드와 같이 setCount(1)를 실행한 후 바로 count의 값을 확인해보면 예상과는 다르게 이전 값인 0이 출력된다.
이러한 현상 때문에 setState() 함수가 비동기적이라고 생각할 수 있다. 하지만, setState() 함수는 동기적이다.
const [count, setCount] = useState<number>(0);
useEffect(() => {
setCount((prev) => {
prev = 1;
console.log(prev); // 1이 출력된다.
return prev;
});
}, [])setState() 함수의 callback 함수를 활용해서 이전 값을 바꿔준 후 값을 확인하면 바뀐 값인 1로 출력된다. 그렇기 때문에 setState() 함수 자체는 동기적이고, 사실 react가 비동기적인 것이다.
setState() 함수는 동기적이고 react가 비동기적인 것이다.
react는 state 값이 바뀔 때마다 렌더링을 다시 하기 때문에 성능 최적화를 위해서 비동기적인 특징을 지니고 있다. 그렇기 때문에 연속적으로 setState() 함수를 호출할 경우 값을 바로바로 바꾸지 않고 하나의 호출로 묶어서 비동기적으로 처리한다.
const [count, setCount] = useState<number>(0);
useEffect(() => {
let a = 0;
for(let i=0; i<10; i++){
setCount((prev) => {
prev++;
a = prev;
return prev;
});
console.log(a)
}
}, [])
console.log({count})그렇기 때문에 위 코드와 같이 연속적으로 setState()함수를 불러줄 때 내부 callback 함수에서 변수 a의 값을 바뀐 prev값으로 정의해준다고 해도 for문 동안 출력되는 a의 값은 오직 1이다.
제일 처음에 바뀌는 값만 즉각적으로 정의가 되고 이후 연속적으로 바뀌는 값들은 적용되지 않는다.
결론 : setState() 함수는 동기적이고 react는 비동기적이다.
