리액트 Batching

리액트에서는 불필요한  렌더링을 막기 위해 데이터 값의 변경들을 한 번에 모아 한 번에 업데이트하는 방식

Batching update 방식이 있다고 한다

여러번 불필요한 리 렌더링이 많이 일어나게 되면 애플리케이션의 성능에 영향을 미칠 수 있기 때문에

이를 해결하기위해서 등장했다고 한다. React batch updating

 

버튼을 클릭시 +3으로 동작하도록 구현

위 사진에서 코드는 버튼을 클릭했을 시에 setPlusNum(plusNum + 1)을 총 3번 실행하므로 한 번의 버튼 클릭 시

plusNum이 +3이 되도록 구현을 해보았다.

하지만!!

버튼 한번 클릭

 

콘솔 창과 화면에 보이는 현재에 plusNum은  한 번만 실행된 것처럼 1값만 즉 +1 단 한번만 실행된 것 처럼 나왔다.

이 결과로 리액트는 Batching update방식으로 중복되는 처리들을 한 번으로 줄여서 렌더링 횟수를 최소화하여

불필요한 렌더링을 방지하고 더 빠른 속도로 동작하게 한다.

 

+3을 클릭했을시 +3이 잘 동작

위 사진에서는 setPlusNum을 호출할 때 인자로 콜백 함수로 plusNum에 +1을 해주고 있다. 이렇게 해주면 3번의 명령을 한 번에 모아 

순착적으로! 실행시켜준다. 

+3 성공

이러한 방법을 함수형 업데이트 방식이라고 부르며 명령을 순차적으로 실행시킬 수 있다.

 

 

useState훅스

state 변경 함수 useState함수는 비동기 처리 방식이다!

setState라는 변경사항을 한 번에 모아서 한번에 일괄처리합니다.

이것을 Batching이라고 부르는 것이다!