[React] Automatic Batching

automatic 자동
+
batching 묶기

= (랜더링 전 state 변경 사항을) 자동으로 묶어주는 기능!

위의 이름의 정의대로의 기능을 가진 react 18 의 새 기능이다

 

이전부터 궁금한게 있었다

아래와 같은 구문에서

setA((a) => a+1)

setB((b) => b+1)

상태가 변경되면 새로 랜더링 되는건 알고 있었는데

상태 변경 코드 라인에서 바로 새로 랜더링 되는지,

아니면 일단 상태 변경 사항을 모아뒀다가 구문 종료 후에 모아둔 변경 사항을 읽어서 새로 랜더링 하는지,

랜더링 시점을 확실하게 알지 못했었다

물론 위의 코드는 a 뿐 아니라 b 의 상태도 바꿀것이라고 알았지만,

a의 상태 변경이 감지되면 바로 랜더링 된다면 실제로는 b 변경까지 코드가 실행 못하지 않나?

마치 return 되어 끝나버리듯이 코드가 중단되고 랜더링 되는 것이 아닌가?

왜 b까지 다 한번에 랜더링 되지? 변화가 감지되면 랜더링된다며?

뭐 변경 사항들 킵해두고나서 코드를 다 훑고 나서야 비교하는건가? 

에 대한 의문이 있었다

그 답이 바로 automatic batching 인 것이다! 두둥!

아 그게 이거 때문이었어?

 

일전에 아래에 코드에서 이상함을 느꼈었다. (automatic batching 를 몰랐을때...)

아마 리액트 처음 배우는 분들은 나처럼 어 이게 왜 둘 다 false 야? 하셨을 것이다... 나만 그랬나?

setLoading(true)
console.log(loading)
setLoading(false)
console.log(loading)

// false
// false

위에 코드에서 setLoading(false) 를 setTimeout 안에 넣어주면 의도한대로

// true // false 가 나오길래 나는

'음... 너무 빠른 시간안에 같은 state 를 여러번 건드리면 상태 변경이 너무 빨라서 콘솔에서 상태 변경 인식이 안됐나보다'

했었는데... 아~아주 잘못 생각한 거였다

 

아래는 내 추측이 담긴 automatic batching 과 랜더링 시점 의 이해이다

일단 코드를 처음부터 끝까지 모두 쭈욱 훑고나서

모아둔 상태 변화를 css 처럼 cascading하여 상태 변화의 중복을 덮어써서(automatic batching) 정리하여 랜더링!

즉, 파일 전체를 읽고난 후 automatic batching 으로 상태 변경 내역을 cascade 한 결과물로 랜더링이 발생된다!

멋대로 이해하는 것이니 언젠가 수정할지도 모르지만, 이렇게 이해하면 막혔던게 탁 트이는 느낌이라 참 즐겁다

설명하기 어려운 이 즐거움