usedeferredvalue 썸네일형 리스트형 React 컴포넌트에서 성능 저하 원인 분석 및 제거 방법 React 앱이 느려지는 주된 원인은 불필요한 재렌더, 비싼 계산, 거대한 리스트 렌더링, Context 전파, 잘못된 이펙트 사용 등입니다. 이 글은 DevTools로 병목을 찾고, 코드로 제거하는 실무 중심 방법을 정리합니다.1. 성능 저하 징후 빠르게 파악하기다음과 같은 징후가 보이면 렌더링 병목을 의심합니다.- 입력 시 딜레이가 느껴집니다.- 스크롤이 끊깁니다.- 특정 화면 전환이 버벅입니다.- 컴포넌트가 자주 재렌더됩니다.먼저 측정부터 합니다. 무작정 최적화는 낭비입니다.2. DevTools Profiler로 병목 찾기React DevTools Profiler로 렌더 타임을 기록합니다. Flamegraph에서 시간이 긴 컴포넌트와 재렌더가 반복되는 지점을 확인합니다. Highlight updat.. 더보기 React 18의 Concurrent Features 활용 가이드 React 18의 Concurrent Features는 UI 응답성을 지키면서 무거운 작업을 부드럽게 처리하도록 돕습니다. 핵심은 작업의 우선순위를 나눠 급한 업데이트(타이핑, 클릭)와 무거운 업데이트(필터링, 렌더 트리 큰 변경)를 동시에 조율해 끊김 없는 사용자 경험을 제공하는 것입니다.1. Concurrent Rendering의 목표Concurrent Rendering은 멀티스레드가 아닙니다. React가 렌더링 작업을 쪼개고, 급한 작업을 먼저 처리하며, 불필요해진 작업을 중단할 수 있게 합니다. 따라서 입력 지연, 스크롤 끊김, 대량 리스트 필터링 시 프리즈 같은 문제를 줄일 수 있습니다.2. Automatic Batching: 비동기에서도 렌더 한 번React 18은 이벤트 핸들러뿐 아니라 s.. 더보기 이전 1 다음