[React] useState batching과 동기 비동기에 대하여

useState는 두 가지에 대한 특이점이 있습니다.

 

1. Batch Update

• state값의 업데이트는 16ms 단위로 이루어진다.
• 16ms 내 변경된 같은 스코프내에 state값은 한 번에 업데이트된다.
  • 때문에 setState 작업이 비동기적으로 작동한다.

const [num, setNum] = useState(0)

const handleNumPlus = () => {
	setNum(num + 1)
    	setNum(num + 1)
}

console.log(num) // 0

// UI 상은 1이 나옴

코드만보면 2가 찍혀야 하는데 위와 같이 같은 스코프내에서 plus 함수를 실행해도 결과 값은 1이 나온다.

이유는 Batch Update가 되었기 때문이다.

setNum코드에서 num 값은 세 번의 코드 모두 0이라는 같은 초기값을 전달받기 때문에 결과값이 1이 나온다.

 

2. 비동기 작업

• setState는 비동기적으로 작동한다.
• useState를 배울 때 흔히 하는 실수를 알아보자

const [num, setNum] = useState(0)

const handleNumPlus = () => {
	setNum(num + 1)
    console.log(num) // 0
}

위 코드만 볼 때는 콘솔에 1이 찍혀야 하지만 0은 찍히고 UI 상에는 1이 찍힌다. 왜 콘솔에는 0이 찍히냐면 비동기적으로 작업하기 때문에 업데이트가 되기도 전에 num값이 찍혀버려서 실제로 1이지만 0이 찍힌다.

 

이러한 문제를 해결하기 위해서는 함수형 업데이트를 알아야 한다.

 

함수형 업데이트

 

const [num, setNum] = useState(0)

const handleNumPlus = () => {
	setNum((num) => num + 1)
    console.log(num) // 1
}

위와 같이 함수형 업데이트를 사용하면 업데이트된 state값을 인자로 받기 때문에 원하던 결과를 얻을 수 있다.