React - React Deverloper Tool을 이용한 성능 최적화

DevTool Profiler

• React 16.5부터 새로운 DevTools profiler 플러그인의 지원이 추가됨
  • 이 플러그인은 React 애플리케이션에서의 성능 병목 현상을 찾기 위해서 렌더링된 각 컴포넌트에 대한 소요 시간 정보를 수집하는 실험적인 profiler API임

Note

• react-dom 16.5부터 DEV mode에서의 프로파일링을 지원함
• production profiling bundle은 react-dom/profiling로 이용 가능함

• DevTools에 profiler를 지원하는 Profiler 탭이 존재함
  • Profiler 패널은 초기에 비어 있음
  • 녹음 버튼을 클릭하여 프로파일링을 시작함
  • 녹음을 시작하면, DevToools은 애플리케이션이 렌더링될 때마다 성능 정보를 자동적으로 수집함
  • 프로파일링을 끝낼 때, 중지 버튼을 클릭함

성능 데이터 분석하기

Browsing commits

• React는 개념적으로 2개의 phase로 동작함
  • render phase
    • render phase는 어떤 변화(예: DOM)가 만들어져야 하는지 결정함
    • render phase에서 React는 render를 호출하고, 그 결과와 이전 render 결과를 비교함
  • commit phase
    • commit phase에서 React는 변화를 적용함(DOM의 경우, React는 DOM 노드를 삽입, 갱신, 제거함)
    • commit phase에서 React는 또한 componentDidMount와 componentDidUpdate와 같은 생명주기 메서드를 호출함

• DevTools profiler는 commit에 의한 성능 정보를 그룹화함
  • commit들은 profiler의 상단 막대 그래프에 나타냄
  • 막대 그래프의 각 막대는 하나의 commit을 나타냄
    • 푸른 막대는 현재 선택된 commit을 의미함
    • 막대를 클릭하거나, 좌우 버튼을 클릭하여 다른 commit을 선택할 수 있음
    • 각 막대의 색과 높이는 commit이 렌더링되는데 걸린 시간을 나타냄
    • 막대가 길고 노란색에 가까울 수록 시간이 더 많이 걸렸다는 것을 의미함

Filtering commits

• profile이 길수록, 애플리케이션을 렌더링하는 시간이 오래 걸림
• 때때로 process에서 너무 많은 commit들이 있을 수 있음
  • profiler는 문턱값(threshold)을 설정하여 문턱값보다 빠른 commit들을 숨길 수 있음

Flame chart

• flame chart는 특정 commit에 대한 애플리케이션의 상태를 나타냄

  • 그래프에서의 각 막대는 React 컴포넌트(예: App, Nav)를 나타냄
  • 막대의 넓이는 컴포넌트와 그 자식들이 마지막으로 렌더링했을 때 걸린 시간을 나타냄
    • 컴포넌트가 현재 commit에서 리렌더링하지 않았다면, 이전의 렌더링했을 때 걸린 시간을 나타냄
  • 막대의 색은 현재 commit에서 컴포넌트와 그 자식들을 렌더링하는데 얼만큼의 시간이 걸렸는지 나타냄
    • 노란색 막대 : 더 많은 시간이 걸림
    • 파란색 막대 : 더 적은 시간이 걸림
    • 회색 막대 : 현재 commit에서 렌더링하지 않음
  • 한 컴포넌트 막대를 선택하고 commit들 사이에서 어떠한 모습인지 관찰함으로써 이 컴포넌트가 왜 렌더링했는지 힌트를 얻을 수 있음

• 위의 예시에서의 commit은 렌더링하는데 촏 5.7ms가 걸림

  • 렌더링하는데 가장 오래 걸린 컴포넌트는 BrowserRouter(5.7ms)
    • 렌더링하는데 가장 오래 걸린 이유는 자식 컴포넌트인 Router(0.6ms), Loading(0.7ms), styled.div(0.6ms) 때문임

Ranked chart

• ranked chart는 단 하나의 commit을 나타냄
  • 그래프에서 각 막대는 React 컴포넌트(예: App, Nav)를 나타냄
  • 이 그래프는 렌더링하는데 가장 오래 걸린 컴포넌트 막대가 상단에 위치하도록 정렬됨
    • 컴포넌트의 렌더링하는 데 걸리는 시간은 컴포넌트의 자식들이 렌더링하는 데 걸린 시간이 포함되어 있음
    • 그래서 렌더링하는데 가강 오래 걸린 컴포넌트는 일반적으로 트리의 상단에 있음
  • 그래프의 컴포넌트 막대를 클릭하여 확대할 수 있음

DevTool Component

• DevTool의 Component plugin은 애플리케이션의 컴포넌트 트리를 보여줌

  • 컴포넌트를 클릭했을 때, 좌측 패널에서 클릭한 컴포넌트의 props, hooks, 그리고 이 컴포넌트를 렌더링시키는 부모 컴포넌트들에 대한 정보를 제공함

• 좌측 패널의 hooks에서 useState hook을 사용한 state의 변화를 관찰할 수 있음

예) header 컴포넌트의 초기 상태는 false임

예) header 컴포넌트에 mouse를 hover하면 상태가 true로 바뀜

Suspend the selected Component

• 좌측 패널의 타이머 버튼을 클릭하면, 선택된 컴포넌트를 임시로 정지시킬 수 있음
  • 단, 선택한 컴포넌트가 Suspend Container 안에 있어야 함
  • 그렇지 않다면, 에러가 발생함

Inspect the matching DOM Element

• 좌측 패널의 눈 모양 버튼을 클릭하면, html 파일에서의 선택한 컴포넌트와 일치하는 DOM 엘레먼트를 보여줌

Log the Component data in Console

• 좌측 패널의 벌레 모양 버튼을 클릭하면, 선택한 컴포넌트의 데이터를 콘솔창에 출력할 수 있음

View the Source for the element

• 좌측 패널의 빈 괄호 버튼을 클릭하여, 선택한 엘리먼트의 JavaScript Source 코드를 확인할 수 있음