재택근무 환경에서 React 컴포넌트 리렌더링 최적화

문제 상황

코로나로 인해 갑작스럽게 재택근무로 전환되면서 예상치 못한 문제가 발생했다. 사무실에서는 괜찮았던 대시보드 페이지가 일부 팀원들의 개인 노트북에서 버벅이는 현상이 보고되었다.

특히 실시간으로 업데이트되는 통계 데이터를 보여주는 페이지에서 문제가 심각했다. React DevTools Profiler로 확인해보니 부모 컴포넌트가 리렌더링될 때마다 하위 컴포넌트 전체가 재렌더링되고 있었다.

해결 과정

1. React.memo 적용

const StatCard = React.memo(({ title, value, unit }) => {
  return (
    <div className="stat-card">
      <h3>{title}</h3>
      <p>{value} {unit}</p>
    </div>
  );
});

Props가 변경되지 않은 컴포넌트는 리렌더링하지 않도록 수정했다.

2. useMemo로 계산 비용 최적화

const Dashboard = ({ rawData }) => {
  const processedData = useMemo(() => {
    return rawData.map(item => ({
      ...item,
      percentage: (item.value / item.total) * 100
    }));
  }, [rawData]);

  return <StatGrid data={processedData} />;
};

매 렌더링마다 계산하던 통계 데이터를 useMemo로 캐싱했다.

3. useCallback으로 이벤트 핸들러 최적화

const handleFilter = useCallback((filterType) => {
  setFilter(filterType);
}, []);

결과

DevTools Profiler 기준으로 렌더링 시간이 평균 120ms에서 35ms로 감소했다. 팀원들도 체감상 확실히 개선되었다는 피드백을 주었다.

최적화는 필요한 곳에만 적용하는 것이 중요하다. 모든 컴포넌트에 React.memo를 적용하면 오히려 메모이제이션 비용이 더 들 수 있다. Profiler로 병목을 찾고 해당 부분만 개선하는 접근이 효과적이었다.