<aside> 📌 프론트엔드 성능 최적화를 위한 아티클 [FE 최적화] 0. 프론트엔드 최적화 관련 개념 정리 및 간단한 적용 [FE 최적화] 1. 페이지 로드 및 웹 성능 최적화 [FE 최적화] 2. React 렌더링 성능 최적화
</aside>
<aside> 💡 렌더링 성능 최적화를 위해 전후 성능을 비교할 필요가 있어 크롬 확장 프로그램 React Developer Tools의 Profiler로 측정해보았어요. Profiler은 측정이 필요한 부분을 녹화하고 원하는 interactionb을 하거나 시간이 흐른 뒤에 stop을 누르면, 렌더링이 일어날 때마다 해당 정보를 기록하고 각 컴포넌트 별로 렌더링 여부와 렌더링에 걸리는 시간을 확인할 수 있어요.
</aside>
profiling이 끝나면 그동안에 발생한 commit별 flame chart를 보여줘요. 각 commit은 패널의 우측 상단에서 표시되고 각 commit을 선택하면 해당 commit의 flame chart가 표시돼요. commit이 많이 표시되는 것은 측정 시간동안 DOM의 변경이 그 만큼 발생했다는 것이고, 바의 색과 높이는 렌더링 소용된 시간을 나타내요.
그래서 위 방식을 이용해 렌더링에 시간을 오래 소요하거나 렌더링할 필요가 없는데도 발생되는 곳을 찾아 불필요한 렌더링이 발생하지 않도록 개선해보려고 해요.
글자를 입력할 때마다 렌더링이 일어나고(입력 창에서 글자를 추가하거나 지우는 횟수 = 렌더링 횟수), 이때 입력 부분만이 아닌 전체 컴포넌트가 리렌더링 일어나는 것을 확인할 수 있었고, flame chart 모습처럼 렌더링에 많은 시간이 소요되고 있음을 알 수 있어요.
이에 대한 해결로 debounce를 적용했고, 아래와 같이 같은 글자(”HELLO!!”)에 대한 렌더링 횟수가 7번→3번회로 줄어든 것을 확인할 수 있어요.
