state 업데이트는 비동기라기보다는 스냅샷이다.

state 업데이트는 비동기라기보다는 스냅샷이다.

아래와 같이 코드를 작성하면 console.log(state)는 1이 아닌 0이 찍힌다.

const Component = () => {
	const [state,setState] = useState(0)
	return (
    <button onClick = {()=>{
    	setState(1)
        console.log(state) // 0
    }}>
    </button>
    )
}

 

setState가 비동기로 작동해서 console.log보다 나중에 실행되기 때문이라고 생각했는데, 그보다는 스냅샷이 맞는 표현이다.

 

<button onClick = {()=>{
    	setState(1) // 다음렌더링에서 state를 1로 바꿀 준비를 한다.
        console.log(state) // 0
    }}>

 

리액트는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 이는 state가 0인 상태에서 실행된다는 뜻이고 그렇기 때문에 console.log(state)가 0이 찍히는 것이다.

리렌더링은 모든 setState() 호출이 완료된 후에 발생한다.

(웨이터는 첫번째 요리를 말하자마자 주방으로 가지 않는다. 모든 주문을 다 듣고 주방으로 간다.)

---

https://react-ko.dev/learn/state-as-a-snapshot

스냅샷으로서의 state – React

참고