Profiler 썸네일형 리스트형 React 컴포넌트에서 성능 저하 원인 분석 및 제거 방법 React 앱이 느려지는 주된 원인은 불필요한 재렌더, 비싼 계산, 거대한 리스트 렌더링, Context 전파, 잘못된 이펙트 사용 등입니다. 이 글은 DevTools로 병목을 찾고, 코드로 제거하는 실무 중심 방법을 정리합니다.1. 성능 저하 징후 빠르게 파악하기다음과 같은 징후가 보이면 렌더링 병목을 의심합니다.- 입력 시 딜레이가 느껴집니다.- 스크롤이 끊깁니다.- 특정 화면 전환이 버벅입니다.- 컴포넌트가 자주 재렌더됩니다.먼저 측정부터 합니다. 무작정 최적화는 낭비입니다.2. DevTools Profiler로 병목 찾기React DevTools Profiler로 렌더 타임을 기록합니다. Flamegraph에서 시간이 긴 컴포넌트와 재렌더가 반복되는 지점을 확인합니다. Highlight updat.. 더보기 이전 1 다음