- 본 포스트는 lasbe님의 정리를 기반으로 작성되었습니다.
조금조금 REACT, Rendering-batching
#부제 : 렌더링 최적화
리렌더링이란 쉽게 말해서 화면을 구성하는 요소의 변화가 감지되었을 때 화면을 업데이트해주는 것을 말한다. 이 과정에서 새로고침이 아니라 필요한 부분의 내용만을 변경시켜준다. 리액트에서는 이를 상태(state)라고 부르는데, 이러한 상태가 변경되었을 때마다 화면을 리렌더링한다.
1) 잦은 리렌더링
좋은 브라우저는 필요한 부분에서만 렌더링이 작동되는 사이트일 것이다. 불필요한 리렌더링은 결국 브라우저의 성능을 저하시키기 때문이다. 뿐만 아니라 무언가 기능이 많아 진다는 것을 결국 비용과 연관되어 있기 때문이다. 이를 위해서 페이스북 리액트팀은 버전18부터 여러 상태 변경을 묶어서 처리하는 리렌더링 방식의 개념을 강화시켰고 이를 Batching이라 부른다
공식 문서에 따르면, 이러한 단일 업데이트(batch update)는 처리해야 하는 일을 묶어서 한 번에 처리하는 모습을 설명한다. 예를 들어 식당을 갔다고 하자. 주문을 하는데 웨이터에게 음식을 하나 주문하고 가져다 주면 하나 주문하고 다시 가져다 주면 또 다른 것을 주문할 사람이 있겠는가? 없을 것이다.
바로 이렇게 상태 변경을 묶음 단위로 하여 리렌더링의 과정을 최소하는 방향으로 리액트는 발전 중에 있다.
2) 상태의 불변성에 대한 이해와, 리렌더링
이런 점에서 아래의 코드는 인상적이다.
import {useStatea} from 'react'
const [number, setNumber] =useStatea(0)
// 상황1
const Rdnder1 =()=? {
setNumber(number+1)
setNumber(number+1)
setNumber(number+1)
setNumber(number+1)
}
// 상황2
const Rdnder2 =()=? {
setNumber((currenNumber)=>currenNumber+1)
setNumber((currenNumber)=>currenNumber+1)
setNumber((currenNumber)=>currenNumber+1)
setNumber((currenNumber)=>currenNumber+1)
}상황1과 상황2의 결과는 사뭇 다르다. 상황1의 number=1 이고, 상황2의 number=4 이기 때문이다. 이를 다시 설명하면, 상황1은 4줄이 입력되었지만, 리액트에서는 이를 동일한 것으로 여기고 한 번만 동작한다. 왜냐하면 리액트 팀이 그렇게 만들었다.
반면에 상황2는 함수 내에 콜백함수를 만들어서 고차함수 처리를 해주었다. 그 결과 4줄에서 각각의 currenNumber는 그 값이 변경었다고 인식되기에, 결과인 4를 출력할 것이다.
// 상황3
const Rdnder1 =()=? {
setNumber(1)
setNumber(2)
setNumber(3)
setNumber(4)
}상황3 역시도 리액트는 이를 동일한 로직으로 여기서 마지막에 있는 요소 한 번만 실행하여 4를 출력해줄 것이다. 이를 배치성으로 처리한다고 정의한다.
