React 렌더링 성능은 어떤 순서로 진단하고 개선하나요?

이렇게 답해 보세요 (핵심 답변)

먼저 사용자가 느리다고 느끼는 구체적인 상호작용 흐름을 재현하고, React DevTools Profiler와 브라우저 Performance 탭으로 컴포넌트 계산, DOM 변경·레이아웃, 네트워크 중 어디가 실제 병목인지 분리합니다. 렌더링이 문제라면 상태를 실제로 쓰는 컴포넌트 가까이로 내리고(착지 범위 축소) 불필요한 Effect 연쇄 업데이트를 제거한 뒤, 수천 개 규모의 큰 목록은 가상화(Windowing)를 적용하고 반복 계산 지점에 useMemo·memo를 적용합니다. 수정 후에는 동일한 프로덕션 빌드 조건에서 전후 프로파일과 입력 반응성을 다시 비교해 검증합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 컴포넌트 재렌더 횟수가 다소 많더라도 각 렌더가 매우 가볍다면 실제 사용자 지연의 원인은 무거운 레이아웃이나 긴 스크립트 작업일 수 있습니다.
2. 컴포넌트 구조 분리와 가상화처럼 아예 실행할 작업량 자체를 줄이는 접근이 단순 메모이제이션보다 효과가 큰 경우가 많습니다.

면접에서 자주 하는 실수

병목 원인을 측정하지 않은 채 모든 컴포넌트와 함수에 습관적으로 memo와 useCallback만 씌우고 성능이 개선되었다고 단정하지 않습니다.