useCallback 썸네일형 리스트형 React 컴포넌트에서 성능 저하 원인 분석 및 제거 방법 React 앱이 느려지는 주된 원인은 불필요한 재렌더, 비싼 계산, 거대한 리스트 렌더링, Context 전파, 잘못된 이펙트 사용 등입니다. 이 글은 DevTools로 병목을 찾고, 코드로 제거하는 실무 중심 방법을 정리합니다.1. 성능 저하 징후 빠르게 파악하기다음과 같은 징후가 보이면 렌더링 병목을 의심합니다.- 입력 시 딜레이가 느껴집니다.- 스크롤이 끊깁니다.- 특정 화면 전환이 버벅입니다.- 컴포넌트가 자주 재렌더됩니다.먼저 측정부터 합니다. 무작정 최적화는 낭비입니다.2. DevTools Profiler로 병목 찾기React DevTools Profiler로 렌더 타임을 기록합니다. Flamegraph에서 시간이 긴 컴포넌트와 재렌더가 반복되는 지점을 확인합니다. Highlight updat.. 더보기 React 앱 성능 최적화를 위한 메모이제이션 기법 메모이제이션은 동일한 입력에 대해 계산 결과나 참조를 재사용해 불필요한 렌더와 연산을 줄이는 방법입니다. React에서는 React.memo, useMemo, useCallback이 핵심 도구입니다. 다만 남용하면 복잡도와 메모리 비용이 증가하므로 측정과 목적에 맞게 적용하는 것이 중요합니다.1. 언제 메모이제이션이 필요한가다음 중 하나라도 해당되면 고려합니다: 연산 비용이 큰 계산이 매 렌더마다 반복되는 경우, 자식 컴포넌트가 동일한 데이터로 자주 렌더되는 경우, 리스트 항목 수가 많아 렌더 비용이 큰 경우, props로 객체/함수 참조가 자주 바뀌어 불필요한 재렌더를 유발하는 경우입니다.2. React.memo로 컴포넌트 메모이제이션React.memo는 props의 얕은 비교로 변경이 없으면 자식 렌.. 더보기 이전 1 다음