측정
스크롤, 검색 입력, 필터 변경 중 느린 상호작용을 Profiler로 기록한다.
항목 비용
행 컴포넌트의 이미지, 계산, inline 객체, 이벤트 핸들러를 확인한다.
가상화
수천 개 DOM을 한 번에 그리는 대신 보이는 범위만 렌더한다.
계산 분리
필터와 정렬은 debounce, useMemo, 서버 검색 중 적합한 방식으로 줄인다.
Windowing
보이는 행만 렌더
react-window 같은 도구로 DOM 수를 제한
행 높이와 접근성 확인
Memo row
행 재렌더 감소
row props가 안정적이면 memo가 효과
key와 참조 안정성 필요
Debounce
입력 빈도 완화
검색어 변경마다 무거운 계산이나 요청을 즉시 실행하지 않음
사용자 지연감 조절
Pagination
데이터 규모 제한
클라이언트가 감당할 양만 가져오거나 서버에서 나눔
무한 스크롤 대안