이번에 styled components를 사용 시 re-rendering 되는 것을 확인했다.
하지만 react에서 re-rendering 되는 것과 실제 브라우저에서 re-rendering 되는 것을 달랐다.
virtual dom이 실제로 변경된 영역만 re-rendering을 하도록 한다.
그래도 react에서 re-rendering 영역으로 잡히는 것은 그 함수를 다시 실행하면서 실행되는 자바스크립트 코드양이 많아지는 것과 같다.
이것이 실제로 성능에 얼마나 차이가 있는지 테스트를 해보려 한다.
이번에 렌더링 관련해서 개선한 코드를 적용하기 전과 적용 후의 성능을 측정해보았다.
그러나 성능 테스트를 해보면 유의미한 차이가 났다.
리액트 프로파일러로 측정한 경우엔 10배정도 차이가 났고
브라우저에서 성능테스트를 한 경우 3~4배 차이가 났다.
사람이 부드럽게 느끼는 프레임이 60Hz, 16.7ms인점을 감안하면
개선 전 코드의 렌더링 시간은 약 47ms, 약 21Hz로 매우 느린반면
개선 후 코드의 렌더링 시간은 약 11.3ms, 약 88Hz로 상당히 부드러운 편이었다.
useMemo(() => {
return lectureData.courseInfo?.category?.map((item) => (
<CourseCommonButton
key={item.id}
id={item.id}
text={item.name}
selectedId={selectedCategoryId}
setSelectedId={setSelectedCategoryId}
/>
));
}, [lectureData.courseInfo?.category, selectedCategoryId])
렌더링이 느린 것이 체감이 되어 최적화를 해야된다면 styled components를 사용한 곳엔 전부 useMemo를 사용하거나 컴포넌트 분리 시 최대한 useState를 사용을 자제하고 useRef를 사용하는 것이 좋을 것 같다.