✏️ useState는 비동기이다. 동기적으로 사용하는 방법?

 

 

 

🔥 useState는 비동기이다!

페이지를 구성하는 데는 많은 state들이 존재한다. 하나하나의 state 변화에 리랜더링을 발생시킨다면, 성능저하가 발생 될 것이다.

이를 해결하기 위해서 React는 setState가 연속으로 호출되면 배치(batch)처리를 통해 한번에 리랜더링 하게 된다.

수많은 setState를 연속으로 사용해도 배치 처리로 인해 랜더링은 한번만 된다.

리액트의 state는 `객체`이고, 객체이기 때문에 동일한 key에 대해 이전의 값을 덮어 씌우기 때문에 결국 마지막 명령어만 수행하게 된다.

 

 

 

배치(batch)란?

React가 성능을 위해 여러개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다.
React는 16ms 단위로 배치를 진행한다. 즉, 16ms동안 변경 된 상태값들을 하나로 묶는다.
그 사이 변경된 상태값을 모아서 이전의 엘리먼트 트리와
변경된 state가 적용된 엘리먼트 트리를 비교하는
작업(reconciliation)을 거쳐 최종적으로 변경된 부분만 DOM에 적용시킨다.

 

 

비동기적으로 동작하는 이유?

1. 컴포넌트의 일관성을 유지하기 위해서 : setState호출이 한번에 처리할 수 있게 비동기로 처리된다.

리액트가 여러 상태 업데이트를 하나의 업데이트로 묶어서 처리한다. 이로서 컴포넌트의 일관성을 유지할 수 있다.

 

2. 성능 최적화 : setState를 배치(batch)처리 함으로써 가상 DOM(Virtual DOM)을 통해 변경사항을 비교하고,

최적화된 랜더링 작업을 수행한다.

 

 

 

아래 예시를 보면 +2씩 올라가도록 코드를 짰지만, 예상대로 흘러가지 않고, +1씩 증가되는 것을 볼 수 있다.

 

 

 

 

 

---

 

 

 

useState를 동기적으로 처리하는 방법

1. useEffect의 의존성 배열 활용

2. useState의 인자에 콜백함수를 넣는다.

 

 

 

 

1. useEffect 사용 예시

 

 

 

 

 

2. 콜백함수 사용

 

 

 

---

 

 

`React18`에서는 setState 코드를 두번 실행하면, 두번의 랜더링이 일어난다

 

Docs

How to Upgrade to React 18 – React