본문 바로가기

devtools

React 컴포넌트에서 메모리 누수 디버깅하기 메모리 누수는 React 앱에서 스크롤이 버벅거리거나, 탭 전환 후 메모리가 계속 증가하는 증상으로 나타납니다. 실무에서는 Chrome DevTools와 React DevTools로 누수를 확인하고, useEffect 정리(cleanup) 누락, 이벤트 리스너, 타이머, 네트워크 요청 미중단 등 흔한 패턴을 점검해 해결합니다.1. 누수 징후 빠르게 파악하기1) 페이지를 몇 번 이동하거나 컴포넌트를 반복 마운트/언마운트 했을 때 메모리가 계속 증가합니다. 2) 콘솔에 "Can't perform a React state update on an unmounted component" 경고가 보입니다. 3) DevTools Memory 탭에서 Detached DOM 노드가 증가합니다.2. DevTools로 근거 .. 더보기
React에서 컴포넌트 성능 측정 및 분석하기 성능 최적화는 느낌이 아니라 데이터로 판단해야 합니다. 이 글에서는 React 애플리케이션에서 컴포넌트 렌더링 성능을 측정하고, 병목을 찾아내어 개선 방향을 정하는 실무 중심 방법을 정리합니다.1. 무엇을, 왜 측정할까요?React 앱에서 체감 성능 저하는 주로 불필요한 재렌더, 무거운 계산, 긴 커밋 시간, 긴 작업(Long Task)으로 발생합니다. 측정의 목표는 다음을 파악하는 것입니다.어떤 사용자 동작이 느린가 (검색, 필터, 탭 전환 등)어떤 컴포넌트가 느린가 (실제 렌더 시간, 커밋 시간)왜 렌더됐는가 (props, state, context 변경 원인)2. React DevTools Profiler 기본기React DevTools의 Profiler 탭으로 렌더링 비용을 기록합니다.Record.. 더보기

티스토리툴바