왜 내 React 앱이 5,000개의 레코드를 처리할 때 느려졌을까
검색 가능한 드롭다운과 데이터 테이블이 포함된 React 기능을 구현했습니다.
개발 중에는 모든 것이 잘 작동했습니다. 하지만 실제 운영 데이터를 로드하자 앱이 느려졌습니다.
드롭다운을 여는 데 몇 초가 걸렸고, 검색창에 타이핑할 때 버벅거림이 느껴졌습니다. 또한 앱이 너무 많은 메모리를 사용했습니다.
5,000개의 사용자 레코드를 처리해야 했고, 즉각적인 검색과 부드러운 스크롤이 필요했습니다.
해결 방법은 다음과 같습니다.
계산을 위해 useMemo 사용하기 매 렌더링마다 데이터를 필터링하는 것을 중단했습니다. 대신 useMemo를 사용하여 필터링된 리스트를 저장했습니다. 이를 통해 CPU의 불필요한 연산을 방지할 수 있습니다.
디바운싱(Debouncing) 추가하기 이전에는 키를 누를 때마다 검색이 실행되었습니다. 이는 대규모 리스트에서 성능 부담이 큽니다. 300ms의 디바운스를 추가하여, 이제 사용자가 타이핑을 멈춘 후에만 검색이 수행됩니다.
가상화(Virtualization) 구현하기 이것이 가장 큰 해결책이었습니다. 5,000개의 DOM 요소를 모두 렌더링하는 대신 react-window를 사용했습니다. 이제 브라우저는 화면에 보이는 20~30개의 행만 렌더링합니다. 덕분에 스크롤이 부드러워지고 메모리 사용량도 줄어들었습니다.
리렌더링 방지하기 행(row) 컴포넌트에 React.memo를 사용했습니다. 또한 이벤트 핸들러에는 useCallback을 사용했습니다. 이를 통해 데이터가 변경되지 않았을 때 자식 컴포넌트가 업데이트되는 것을 방지했습니다.
서버 사이드 페이지네이션(Server-side Pagination) 사용하기 모든 사용자를 한 번에 가져오는 것을 중단했습니다. 대신 50개씩 작은 페이지 단위로 가져오도록 변경했습니다. 그 결과 API 응답 속도가 빨라지고 데이터 페이로드 크기도 줄어들었습니다.
Material UI 최적화하기 MUI Autocomplete는 훌륭하지만, 방대한 리스트에서는 성능 저하가 발생합니다. 속도를 유지하기 위해 표시되는 옵션을 처음 100개의 결과로 제한했습니다.
결과:
• 드롭다운 속도: 5초에서 500ms 미만으로 단축. • 검색 응답: 버벅거림에서 즉각적인 응답으로 개선. • 메모리 사용량: 대폭 감소.
성능 문제는 개발 중에 숨겨져 있는 경우가 많습니다. 실제 데이터가 사용자에게 전달될 때 비로소 문제가 드러납니다.
먼저 병목 현상을 측정하세요. 그리고 메모이제이션(memoization), 가상화(virtualization), 디바운싱(debouncing)을 통해 가장 큰 문제부터 해결하세요.
여러분의 React 앱에 가장 도움이 되었던 최적화 방법은 무엇인가요? 댓글로 알려주세요.
Source: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9