반복 렌더 비용 줄이기
ProductList는 filterTerm이 바뀔 때만 다시 계산합니다.
ProductItem은 product와 onItemClick이 같으면 렌더를 건너뜁니다.
검색 결과와 클릭 동작은 최적화 전과 같아야 합니다.
반복 렌더 비용과 초기 로딩 비용을 분리해 기록한다
대규모 리스트 최적화는 화면이 다시 그려지는 비용과 처음 코드를 내려받는 비용을 각각 측정할 때 결과가 명확해집니다.
초기 로딩 비용 줄이기
처음 화면에 필요 없는 큰 라우트는 lazy로 분리합니다.
Suspense 폴백은 화면 흐름을 깨지 않게 작게 둡니다.
작은 컴포넌트까지 나누어 요청 수를 늘리지 않습니다.
01 baseline
기준값
최적화 전 커밋 시간과 렌더 대상을 남깁니다.
02 patch
수정 이유
memo, callback, memoized value를 각각 왜 넣었는지 적습니다.
03 retest
재측정
같은 클릭과 검색어로 전후 차이를 비교합니다.
04 behavior
기능 유지
필터 결과, 상품 클릭, 로딩 폴백이 정상인지 확인합니다.