재택근무 환경에서 React DevTools 프로파일러로 성능 병목 찾기

문제 상황

이번 주부터 전사 재택근무가 시행되면서 VPN을 통한 사내 대시보드 접근이 잦아졌다. 네트워크 지연과 맞물려 기존에는 눈에 띄지 않던 렌더링 성능 문제가 두드러지게 나타났다.

특히 실시간 모니터링 페이지에서 1초마다 데이터가 갱신될 때마다 전체 차트 컴포넌트가 다시 그려지는 현상이 발생했다.

원인 파악

React DevTools의 Profiler 탭을 열어 녹화를 시작했다. 데이터 갱신 시점의 Flame Graph를 확인한 결과, 변경되지 않은 차트 컴포넌트들까지 모두 리렌더링되고 있었다.

// 문제가 된 코드
function Dashboard({ data }) {
  return (
    <div>
      <ChartA data={data.chartA} options={{ color: 'blue' }} />
      <ChartB data={data.chartB} options={{ color: 'red' }} />
      <ChartC data={data.chartC} options={{ color: 'green' }} />
    </div>
  )
}

매 렌더링마다 options 객체가 새로 생성되어 ChartA, ChartB, ChartC의 props가 변경된 것으로 인식되었다.

해결

useMemo로 options 객체를 메모이제이션하고, 차트 컴포넌트들을 React.memo로 감쌌다.

const ChartA = React.memo(({ data, options }) => {
  // 차트 렌더링 로직
})

function Dashboard({ data }) {
  const chartAOptions = useMemo(() => ({ color: 'blue' }), [])
  const chartBOptions = useMemo(() => ({ color: 'red' }), [])
  const chartCOptions = useMemo(() => ({ color: 'green' }), [])

  return (
    <div>
      <ChartA data={data.chartA} options={chartAOptions} />
      <ChartB data={data.chartB} options={chartBOptions} />
      <ChartC data={data.chartC} options={chartCOptions} />
    </div>
  )
}

결과

Profiler로 다시 측정한 결과 렌더링 시간이 약 70% 감소했다. 데이터가 실제로 변경된 차트만 업데이트되면서 VPN 환경에서도 부드러운 UX를 유지할 수 있게 되었다.

재택근무가 장기화될 것 같아 성능 최적화의 우선순위를 다시 점검해야 할 시점이다.