비최적화 측정
App, ProductList, ProductItem이 함께 렌더되는지 기록합니다.
같은 입력으로 전후 결과 비교
최적화 실습의 핵심은 빠르게 고치는 것이 아니라, 같은 조건에서 렌더 범위와 커밋 시간을 다시 확인하는 것입니다.
원인별 적용
memo, useCallback, useMemo를 역할에 맞게 분리해서 넣습니다.
동일 조건 재측정
전과 같은 동작을 반복해 커밋 길이와 렌더 대상을 비교합니다.
초기 로드 점검
큰 라우트는 lazy와 Suspense로 지연 로드를 검토합니다.
렌더 범위 감소
카운터 변경 때 목록 컴포넌트가 다시 그려지지 않습니다.
기능 유지
검색 결과와 상품 클릭 동작은 최적화 전과 같아야 합니다.
과분할 경계
작은 컴포넌트까지 lazy로 쪼개 요청 수만 늘리지 않습니다.