React 애플리케이션 성능 최적화: 많은 수의 프로젝트를 렌더링하는 효율적인 방법

Question

저는 React 애플리케이션을 개발 중이며 많은 항목 목록(수천 행)을 표시해야 합니다. 현재 사용자가 목록을 스크롤하거나 항목을 필터링할 때 성능이 매우 느립니다. 사용자 경험을 향상시키기 위해 React 애플리케이션의 성능을 최적화할 수 있는 방법이 있습니까?

추가 정보:

- 저는 React 함수 구성 요소와 후크를 사용하여 항목 목록을 렌더링하고 있습니다. - 목록의 각 항목에는 텍스트와 그림을 포함한 여러 데이터 필드가 포함되어 있습니다.

- 현재 내장된 지도 기능을 사용하여 항목 목록을 렌더링하고 있습니다.

- 라이브러리를 사용하여 항목 목록 필터링 및 정렬을 처리하고 있습니다.

- 성능 향상을 위해 shouldComponentUpdate 및 React.memo를 사용해 보았으나 여전히 속도가 충분하지 않습니다.

타사 라이브러리를 사용하거나 필요한 경우 애플리케이션의 일부를 다시 작성하는 등 어떤 제안이라도 환영합니다. 도움을 주셔서 미리 감사드립니다!

Answer 1

라이브러리 react-window를 사용할 수 있습니다. 요소 수가 많은 목록의 스크롤을 가상화하는 데 유용하며 성능 조정에 도움이 됩니다.