🕵️♂️ React Profiler 실전: Context API 렌더링 낭비의 범인을 찾아라!
🐢 "왜 이렇게 느리지?" 감으로 때려잡지 마세요
열심히 만든 React 앱이 버튼 하나 누를 때마다 묘하게 버벅거리는 느낌,
받아보신 적 있나요?
많은 개발자들이 성능 문제를 해결하기 위해 코드를 훑어보지만, 복잡한
컴포넌트 트리 속에서 Context API로 인한
연쇄적인 리렌더링을 눈으로 찾아내기는 불가능에
가깝습니다.
최적화의 제1원칙은 "추측하지 말고 계측하라(Don't guess,
Measure)"입니다.
오늘은 React 개발자의 필수 무기인 React Profiler를
사용하여, 숨어있는 렌더링 낭비를 엑스레이처럼 찍어내고 범인을 검거하는
실전 기술을 다뤄보겠습니다.
🎬 1. 프로파일링 시작하기: 녹화 버튼을 눌러보세요
개발자 도구(F12)의 'Profiler' 탭은 마치 동영상 촬영과 비슷합니다. 내가
원하는 동작을 수행하는 동안 React가 내부적으로 어떤 일을 하는지
기록합니다.
단계별 진행 방법
- 개발자 도구를 열고 Profiler 탭을 클릭합니다.
- 파란색 녹화 버튼(Record)을 누릅니다.
- 성능을 측정하고 싶은 동작을 수행합니다. (예: Context 값을 바꾸는 버튼 클릭)
- 다시 중지 버튼(Stop)을 누릅니다.
녹화가 끝나면 막대그래프들이 나타납니다. 이것이 바로
플레임 그래프(Flamegraph)입니다.
여기서 회색은 리렌더링 되지 않음,
노란색은 렌더링 시간이 오래 걸림을 의미합니다. 우리의
목표는 노란색을 줄이고 회색을 늘리는 것입니다.
🔍 2. Context 낭비 찾아내기: "Why did this render?"
Context API의 가장 큰 문제는 Provider의 값이 변하면, 해당 값을 쓰지 않는
하위 컴포넌트까지 덩달아 리렌더링 되는 경우입니다.
Profiler에서 이 범인을 잡는 결정적인 단서는 바로
"Why did this render?" 정보입니다.
✅ 분석 시나리오:
1. Profiler 결과 화면에서 Ranked 차트를 선택하여 렌더링
시간이 긴 순서대로 정렬합니다.
2. 의심가는 컴포넌트를 클릭합니다.
3. 우측 패널의 리렌더링 원인을 확인합니다.
만약 다음과 같은 메시지가 뜬다면 Context 최적화가 필요한 상태입니다.
⚠️ Hook 1 changed (Context)
이 메시지는 "부모로부터 받은 Props는 그대로인데,
Context 값이 변해서 어쩔 수 없이 렌더링했다"는
자백입니다.
설정 꿀팁: 렌더링 하이라이트
Profiler 설정(톱니바퀴 아이콘)에서
'Highlight updates when components render'를
체크하세요.
이 옵션을 켜고 앱을 사용하면, 리렌더링 되는 컴포넌트 테두리에
초록색/노란색 박스가 번쩍거립니다.
버튼 하나 눌렀는데 화면 전체가 번쩍거린다면? 100%
Context 분리나 Memoization이 필요한
상황입니다.
🛠️ 3. 발견된 문제 해결하기 (Before & After)
Profiler로 범인을 잡았다면, 이전에 배웠던 기술들을 적용하여 해결하고
다시 측정해봐야 합니다.
| 증상 (Profiler 진단) | 원인 | 해결책 |
|---|---|---|
| 모든 하위 컴포넌트가 동시에 렌더링됨 | Provider의 value 객체 참조 변경 | Provider value를 useMemo로 감싸기 |
| 특정 데이터만 쓰는 컴포넌트도 렌더링됨 | 거대한 단일 Context 사용 | State와 Dispatch Context 분리 |
✅ 최적화는 '증거' 기반으로
React Profiler는 막연한 불안감을 명확한 데이터로 바꿔주는 훌륭한
도구입니다.
Context API를 사용할 때는 개발 단계에서부터 주기적으로 Profiler를
돌려보며, 의도치 않은 렌더링(Unintended Re-renders)이
발생하는지 체크하는 습관을 들이세요.
🚀 오늘의 실천 포인트
- 1. 설치 확인: React Developer Tools가 설치되어 있는지 확인하십시오.
- 2. 녹화 습관: 기능 구현 후에는 습관적으로 Profiler 녹화 버튼을 눌러보십시오.
- 3. 회색 확인: 변경되지 않은 컴포넌트가 회색(렌더링 안 됨)으로 남는지 반드시 확인하십시오.
이제 여러분은 단순히 기능을 구현하는 코더를 넘어, 애플리케이션의 건강 상태를 진단하고 처방할 수 있는 엔지니어로 성장했습니다.
댓글 쓰기