728x90
1.Batching 이란?
Batching이란 React가 더 나은 성능을 위해 state 업데이트를 모아서 한번의 리렌더링을 진행하는 메커니즘을 말한다.
1.1 Batching의 장점은?
React에서 성능적인 장점을 갖는다.
여러개의 state가 업데이트될 때마다 발생하는 불필요한 리렌더링을 막기 때문이다.
식당에서 메뉴를 주문하면 한개씩 결제하지 않고 메뉴를 종합해 한번에 결제하듯이 Batching은 한번의 리렌더링을 한다.
1.2 그렇다면 언제나 한번에 보낼까?
React 18 이전까지는 그렇지 않다.
데이터를 외부에서 가져와 특정 함수 내부에서 state를 업데이트 하거나, 비동기 혹은 Promise, native 이벤트 핸들러 등 특정 상황에서는 한번에 보내지 못하고 여러번 나누어 보내기도 한다.
const App = () => {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(0);
const func = () => {
fetchSomething().then(() => {
// 이 업데이트들이 이벤트가 *진행되는 중*이 아닌,
// *완료된 후의* 콜백에서 실행되기 때문에 배칭되지 않았다.
setCount((c) => c + 1); // 리렌더링을 발생시킨다.
setFlag((f) => f + 1); // 리렌더링을 발생시킨다.
});
}
return (
<div>
<button onClick={func}>Next</button>
<h1 style=>{count}</h1>
</div>
);
}
위의 코드에서 리렌더링의 동장을 살펴보자면...
- setCount와 setFlag가 호출될 때마다 리렌더링이 발생한다.
- 첫 번째 setCount 호출로 인해 count의 값이 변경되고 리렌더링 된다.
- 두 번째 setFlag 호출로 인해 flag의 값이 변경되고 리렌더링 된다.
1.3 그래서... React 18에서는 달라진게 있어?
물론❗❗
Automatic Batching(자동 배치) 라는 것이 추가되었다.
자동 배치란, createRoot를 통해 모든 업데이트가 어디서 왔는가와 무관하게 자동으로 배칭되는 것이다.
이는 timeout, promise, native 이벤트 핸들러와 모든 이벤트는 React에서 제공하는 이벤트와 동일하게 state 업데이트를 배칭할 수 있음을 의미한다.
const App = () => {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(0);
const func = () => {
fetchSomething().then(() => {
// React 18과 이후 버전에서는 아래 항목들을 배칭한다.
setCount((c) => c + 1);
setFlag((f) => f + 1);
// React는 이 콜백이 끝났을 때만 리렌더링을 하게 된다.
// (이제 여기도 배칭이 들어간다!)
});
}
return (
<div>
<button onClick={func}>Next</button>
<h1 style=>{count}</h1>
</div>
);
}
React 18이 업데이트 되면서 createRoot로 업그레이드 하는 것이 권장된다.
render를 통해 확인 가능하도록 한 유일한 이유는 프로덕션 환경에서 테스팅이 용이하기 때문이다.
참고 링크
728x90
'React > 리액트 기초' 카테고리의 다른 글
| React) State (0) | 2023.11.28 |
|---|---|
| React) 리액트 컴포넌트와 Props (0) | 2023.11.28 |
| React) Diffing 알고리즘 (비교 알고리즘) (0) | 2023.11.23 |
| React) Virtual DOM 가상 돔 (0) | 2023.11.22 |
| React) 컴포넌트와 렌더링 (0) | 2023.11.17 |
