prev

state의 비동기 처리

 

필요성  

 

state 는 setState 함수가 끝나면,  화면에 바로  반영되어 리렌더링 (Re-rendering) 됩니다.

 

 리액트도 값의 변화를 알아차릴 수 있게 해줘야 합니다.

 

동기 와 비동기

 

why ?

비동기로 작동하는 이유 

 

리액트는 변경된 값들을 모아 한번에 업데이트 를 진행해 렌더링을 줄이고자 배치  기능을 사용해 비동기로 작동 한다.

cf)  배치 업데이트는 16ms 주기 입니다.

 

사용법 

" prev " 라는 임시저장공간을 사용합니다.

const [ count, setCount ] = useState(0)

const handleClick = () => {
		setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
      	setCount( (prev) => prev + 1 )
}