React rendering performance test
이번에 styled components를 사용 시 re-rendering 되는 것을 확인했다.
하지만 react에서 re-rendering 되는 것과 실제 브라우저에서 re-rendering 되는 것을 달랐다.
virtual dom이 실제로 변경된 영역만 re-rendering을 하도록 한다.
그래도 react에서 re-rendering 영역으로 잡히는 것은 그 함수를 다시 실행하면서 실행되는 자바스크립트 코드양이 많아지는 것과 같다.
이것이 실제로 성능에 얼마나 차이가 있는지 테스트를 해보려 한다.
이번에 렌더링 관련해서 개선한 코드를 적용하기 전과 적용 후의 성능을 측정해보았다.
개선 전 코드로 테스트
크롬 개발자 도구 React Profiler
크롬 개발자 도구 Performance
개선 후 코드로 테스트
크롬 개발자 도구 React Profiler
크롬 개발자 도구 Performance
비교 및 분석
- 지난번 렌더링 관련 글에서 알아봤지만 실제로 브라우저에서 렌더링 되는 부분에서 차이는 없었다.
실제 렌더링 표시
개선 전 코드로 실제 렌더링
개선 후 코드로 실제 렌더링
그러나 성능 테스트를 해보면 유의미한 차이가 났다.
리액트 프로파일러로 측정한 경우엔 10배정도 차이가 났고
브라우저에서 성능테스트를 한 경우 3~4배 차이가 났다.
사람이 부드럽게 느끼는 프레임이 60Hz, 16.7ms인점을 감안하면
개선 전 코드의 렌더링 시간은 약 47ms, 약 21Hz로 매우 느린반면
개선 후 코드의 렌더링 시간은 약 11.3ms, 약 88Hz로 상당히 부드러운 편이었다.
개선 전 코드에 useMemo 사용
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])
- useMemo를 적용한 부분은 re-rendering이 되지 않았고 렌더링 시간도 줄어들었다.
- 리액트 프로파일러 : 10ms -> 6~8ms로 약간 줄어든 모습을 보였다.
- 크롬 퍼포먼스 : 48ms -> 31.4ms
- 헤더 쪽 까지 useMemo를 사용하진 않았으니 모든 styled-components가 적용된 부분에 useMemo를 적용한다면 더 줄어들 것으로 보인다.
결론
렌더링이 느린 것이 체감이 되어 최적화를 해야된다면 styled components를 사용한 곳엔 전부 useMemo를 사용하거나 컴포넌트 분리 시 최대한 useState를 사용을 자제하고 useRef를 사용하는 것이 좋을 것 같다.
Author And Source
이 문제에 관하여(React rendering performance test), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gth1123/React-rendering-performance-test저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)