React 앱 성능 측정과 렌더링 최적화 전략: DevTools부터 useMemo까지 정복하기
🚀 React 앱 전체 성능 측정 + 렌더링 전략 최적화 방법
React 앱을 개발하다 보면 점점 프로젝트가 무거워지고, 어느 순간부터 앱의 반응 속도가 느려졌다는 걸 체감하게 됩니다.
특히 복잡한 컴포넌트가 많거나, 리스트가 많은 페이지에서는 렌더링 시간이 급격히 늘어나기도 하죠.
이 글에서는 초급자도 따라할 수 있도록, React 앱 전체 성능을 측정하고 렌더링 전략을 최적화하는 방법을 차근차근 설명합니다.
1. 성능 저하가 일어나는 주요 원인
성능 이슈를 해결하려면 먼저 원인을 아는 게 중요합니다.
React 앱에서 성능 저하를 유발하는 주요 원인은 다음과 같습니다:
- 불필요한 리렌더링: 부모 컴포넌트의 렌더링이 자식까지 전파됨
- 무거운 계산 로직: 복잡한 연산을 렌더링 시마다 반복
- 대용량 리스트 직접 렌더링: 수십~수백 개 DOM을 한 번에 그리는 경우
- 비효율적인 상태 관리: context나 전역 상태 변경 시 전체 컴포넌트 리렌더링
- 반복적인 API 호출: 렌더링마다 요청 발생
2. React DevTools Profiler로 전체 렌더링 흐름 분석
성능 측정을 위한 가장 강력한 도구는 React DevTools의 Profiler 탭입니다.
전체 앱에서 어떤 컴포넌트가 얼마나 자주, 얼마나 오랜 시간 동안 렌더링되는지를 시각적으로 확인할 수 있습니다.
✅ 사용법 요약
- React DevTools 설치 (크롬 확장 프로그램)
- 앱 실행 → 개발자 도구(F12) → "⚛ Profiler" 탭 클릭
- "Record" 버튼 클릭
- 앱에서 유저 인터랙션 발생 (예: 버튼 클릭, 입력 등)
- "Stop" 클릭 → 렌더링 시간/횟수 확인
✅ 분석 포인트
- 🔴 빨간색: 렌더링 시간이 오래 걸린 컴포넌트
- ⚠️ 자주 렌더링됨 → 불필요한 리렌더링 의심
- 렌더링 사유 표시됨 (props, hook, context 등)
3. React 앱 렌더링 최적화를 위한 전략
1️⃣ React.memo 사용
React.memo는 props가 바뀌지 않으면 리렌더링을 막는 고차 컴포넌트입니다.
const Button = React.memo(({ onClick, label }) => {
console.log("Button render");
return <button onClick={onClick}>{label}</button>;
});
※ 객체나 함수 props는 참조값이 바뀌기 쉬우므로, useMemo나 useCallback과 함께 써야 효과적입니다.
2️⃣ useCallback & useMemo 조합
🔹 useCallback
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);
🔹 useMemo
const filteredList = useMemo(() => {
return list.filter(item => item.active);
}, [list]);
3️⃣ 상태 리프팅 최소화
상위 컴포넌트로 불필요하게 상태를 올리면 자식 컴포넌트가 모두 리렌더링됩니다.
가능하면 지역 상태 유지 + 컴포넌트 분리를 활용하세요.
4️⃣ 리스트 최적화: key, React Window
// ❌ index를 key로 쓰면 안됨
{items.map((item, index) => (
<Item key={index} data={item} />
))}
// ✅ 고유 ID 사용
{items.map(item => (
<Item key={item.id} data={item} />
))}
렌더링 양이 많을 경우 React Window로 가상화 렌더링을 적용해보세요.
4. 실전 체크리스트: 성능 최적화 흐름
🔍 Step 1. 측정
- DevTools Profiler로 렌더링 추적
- 시간 오래 걸리는 컴포넌트 파악
- 렌더링 원인 분석 (props, hook, context 등)
⚙️ Step 2. 최적화 적용
- React.memo 적용
- useCallback, useMemo 사용
- 리스트 key 최적화
- 무거운 연산 → 분리 또는 lazy 로딩
🧪 Step 3. 테스트
- Profiler 결과 비교
- console.log로 렌더링 횟수 확인
- "왜 리렌더링됐는지" 추적
5. 기타 팁: Chrome Performance 탭도 활용하기
React DevTools 외에도 Chrome 개발자 도구의 Performance 탭을 활용하면
JS 실행 흐름, 렌더링 순서, Reflow/Repaint 여부 등까지 정밀하게 파악할 수 있습니다.
앱 초기 로딩 속도나 스크립트 실행 병목 등 전체적인 퍼포먼스를 분석할 때 병행하면 좋아요.
✅ 마무리 요약
React 앱의 성능 최적화는 단순한 훅 남용이 아니라, 정확한 병목 분석 → 전략적 대응이 핵심!
- DevTools Profiler로 병목 찾기
- 불필요한 리렌더링 제거
- 컴포넌트 단위 최적화 적용
- 필요시 렌더링 가상화 / lazy loading
조금만 신경 쓰면
더 빠르고 더 쾌적한 React 앱이 됩니다! 🚀
다음 글에서는 React Suspense와 코드 스플리팅으로 로딩 최적화하는 방법도 알아볼게요 😎