React 성능 프로파일링: Chrome과 DevTools 활용

개요

애플리케이션이 느려질 때 원인을 찾기 위해선 체계적인 성능 측정이 필요하다. 이 글은 React 성능 프로파일링을 Chrome DevTools와 React DevTools를 통해 단계적으로 확인하는 방법을 설명한다. 처음 접하는 개발자도 이해할 수 있도록 절차와 해석 포인트를 중심으로 정리한다.

왜 프로파일링이 필요한가

성능 문제는 단순한 추정으로 해결하기 어렵다. 불필요한 렌더링, 무거운 연산, 비효율적 상태 관리 등이 원인일 수 있다. 프로파일링은 실제 비용이 어디에 발생하는지 보여준다. 정확한 데이터 없이 최적화하면 시간만 낭비될 가능성이 크다.

Chrome DevTools로 시작하기

녹화 준비

Chrome의 Performance 패널에서 전체 실행 흐름과 CPU 사용량을 확인한다. 녹화 전 다음을 점검한다.

• DevTools를 열고 Performance 탭 선택
• Capture settings에서 Screenshots, Memory 등을 필요에 따라 활성화
• CPU 스로틀링은 기본(없음)으로 시작하고, 모바일 성능을 보려면 4x나 6x로 조절

녹화와 해석

성능 문제 재현 시점부터 녹화를 시작하고, 문제가 발생한 후 녹화를 중지한다. 결과로 얻은 타임라인에서 다음을 확인한다.

• Main 스레드에서 긴 Task가 있는지
• Recalculate style, Layout, Paint 등 레이아웃 관련 작업의 부담
• 스크립트 실행(총 시간)과 함수 호출 트리

Flame chart에서 큰 블록은 시간이 많이 소요된 함수다. 블록을 클릭하면 호출 스택을 보고 원인 모듈을 추적할 수 있다. 이 단계는 전반적인 비용 구조를 파악하는 데 유용하다.

React DevTools 프로파일러 사용

설치와 접근

React DevTools 확장으로 Profiler 탭에 접근한다. 프로파일러는 개별 컴포넌트의 렌더링 시간과 렌더링 횟수를 보여준다. Chrome의 Performance와 함께 사용하면 프레임 단위의 비용과 컴포넌트별 비용을 연결할 수 있다.

녹화 흐름

Profiler에서 Record 버튼을 누른 뒤 문제를 재현한다. 녹화를 종료하면 다음 뷰를 볼 수 있다.

• Flame chart: 컴포넌트별 렌더링 시간 분포
• Ranked chart: 총 렌더링 시간 순위로 정렬된 컴포넌트
• Commit details: 각 커밋(렌더링 사이클)에서 변경된 props와 state

이 정보로 어떤 컴포넌트가 렌더링 비용을 많이 발생시키는지 빠르게 파악할 수 있다. 특히 반복 렌더링이 문제인 경우 Ranked 뷰가 유용하다.

렌더링 비용 측정과 해석

렌더링 비용 측정은 단순히 시간을 보는 것을 넘어야 한다. 평균 렌더 시간, 최댓값, 빈도 등을 함께 고려해야 한다. 예를 들면 짧은 시간이지만 매 프레임 반복되면 누적 비용이 크다.

• 총 렌더링 시간 확인
• 빈번한 재렌더링이 있는지 확인
• 의도치 않은 props 변경 유무 검사

React DevTools의 변경된 props 표시를 보면 어떤 값이 변경되어 재렌더가 발생했는지 알 수 있다. 이를 기반으로 불필요한 변경을 막을 전략을 세운다.

실전 측정 도구와 코드 예제

React의 Profiler API를 이용하면 컴포넌트 단위로 콜백을 받아 수집할 수 있다. 간단한 사용 예는 다음과 같다.

const onRender = (id, phase, actualDuration) => {
  console.log(id, phase, actualDuration);
};

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

위 코드는 렌더링이 발생할 때마다 duration을 출력한다. 실제 수집 데이터를 로깅하거나 서버로 전송해 장시간 분석에 활용할 수 있다.

Chrome과 React DevTools 결합 분석

Chrome Performance로 전체 스레드 비용을 보고, React DevTools로 컴포넌트별 비용을 확인하면 상관관계를 파악할 수 있다. 예를 들어 특정 Commit에서 Main 스레드 블록이 길다면 Profiler에서 그 시점의 컴포넌트를 검사한다. 이 방식은 어디서 비용이 집중되는지 정확히 지적한다.

최적화 우선순위

프로파일 결과에 따라 우선순위를 매긴다. 일반적으로 다음 순서를 권장한다.

• 빈번한 재렌더링 제거
• 비싼 자바스크립트 연산 분리
• 렌더링 범위 축소(컴포넌트 분리, React.memo 사용)
• 비동기 처리와 스로틀링 적용

작은 최적화가 반복 비용을 줄일 때가 많다. 우선순위를 정하고 단계적으로 적용한 뒤 재측정한다.

추가 팁

• 프로파일링은 측정 후에 최적화하고 다시 측정하는 사이클을 유지
• 개발 환경과 프로덕션 환경 간 차이를 인지하고, 필요하면 프로덕션 프로파일링 빌드를 활용
• 자주 변경되는 props가 있다면 useCallback, useMemo로 안정화 고려

마무리

Chrome과 React DevTools를 함께 쓰면 전체 스레드 비용과 컴포넌트 단위 비용을 연결해 해석할 수 있다. 체계적인 녹화, 정확한 해석, 우선순위 기반 최적화로 성능 문제를 효과적으로 해결할 수 있다. 이 과정을 반복하면 애플리케이션 성능을 꾸준히 개선할 수 있다.