React rendering performance test - TEAM-ARK/inflearn-clone-front GitHub Wiki

이번에 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를 사용하는 것이 좋을 것 같다.

관련 글 링크

• https://github.com/Ark-inflearn/inflearn-clone-front/issues/83
• https://github.com/Ark-inflearn/inflearn-clone-front/issues/88
• https://github.com/Ark-inflearn/inflearn-clone-front/wiki/Re-rendering-%EC%A1%B0%EA%B1%B4-%ED%85%8C%EC%8A%A4%ED%8A%B8
• 원문