React: 컴포넌트 해제가 왜 느릴까요?- Virtual List (가상 리스트)로 해결
React 컴포넌트를 사용할 때 해제 시간이 느려지는 경우가 종종 있습니다. 이 블로그 글에서는 이 문제의 원인과 해결책에 대해 알아보겠습니다.
문제: 긴 페이지에서 느린 컴포넌트 해제
무한 스크롤 기능을 구현한 여러 개의 ReactList 컴포넌트를 감싸는 컴포넌트가 있다고 상상해보세요. ReactList는 단순 모드와 균일 모드 두 가지를 제공합니다. 여기서는 단순 모드를 사용하고 있으며, 페이지 스크롤 시 계속해서 콘텐츠를 로드하여 스크롤 가능한 페이지의 길이를 증가시킵니다. 하지만 균일 모드는 요구 사항을 충족시키지 못하여 문제가 발생합니다.
이제 여러 그룹으로 분류된 목록이 있는 시나리오에서 해제 시간이 느린 문제가 발생하는 상황을 상상해보세요. 스크롤 가능한 페이지가 짧고 사용자가 아래로 스크롤하지 않은 경우, 그룹 간 전환은 비교적 빠르게 약 2초가 걸립니다. 그러나 페이지가 모두 로드되어 아래로 스크롤된 경우, 목록 그룹을 변경하는 데 최대 6초가 걸릴 수 있습니다.
추가로 조사해본 결과 페이지가 이미 완전히 로드되어 추가 콘텐츠를 가져와야 하는 상황이 아니라는 것을 알게됩니다. 이를 고려하여 부모 래퍼 컴포넌트의 키를 변경하고 다시 마운트하는 것이 성능을 향상시킬 것이라고 생각합니다. 그러나 그렇지 않습니다. 컴포넌트를 더 짧은 길이로 다시 마운트해도 여전히 해제 프로세스를 완료하는 데 약 5초가 걸립니다. 놀랍게도 완전히 로드된 목록 컴포넌트 페이지에서 “Hello, world”와 같은 간단한 한 줄의 텍스트 컴포넌트로 전환하는 데도 약간 비슷한 시간이 걸립니다.
과제: 여러 컴포넌트 해제
느린 해제 프로세스의 원인은 React의 컴포넌트 해제 메커니즘에 있습니다. 컴포넌트를 제거할 때 React는 컴포넌트 트리에서 모든 리프 노드를 해제해야 하며, 대상 컴포넌트에 도달할 때까지 모든 하위 컴포넌트를 재귀적으로 제거해야 합니다. 즉, 트리 내에 많은 수의 작은 컴포넌트가 있다면 최신 버전의 React에서도 해제 프로세스가 시간이 오래 걸릴 수 있습니다.
해결책: 가상화된 목록 사용
느린 해제 문제를 극복하고 전체적인 성능을 향상시키기 위해 가상화된 목록을 애플리케이션에 도입하는 것이 좋습니다. 가상화는 긴 목록에서 보이는 부분만 렌더링하여 페이지에 렌더링되는 컴포넌트 수를 줄이는 것을 가능하게 합니다.
React에서 가상 목록을 구현하는 데에는 많은 커뮤니티 기반 패키지가 있습니다. 패키지 저장소에서 “React 가상 목록”을 검색하면 다양한 기능과 유지 보수 수준이 다른 다양한 옵션을 찾을 수 있습니다. 프로젝트 요구 사항과 호환성이 좋으며 평가가 좋은, 잘 유지되는 패키지를 선택하십시오.
import React from 'react';
import VirtualList from 'your-virtual-list-package';
const MyComponent = () => {
// 여기에 컴포넌트 로직 작성
return (
<VirtualList
data={yourData}
renderItem={renderItemFunction}
// 추가 props와 구성
/>
);
};
export default MyComponent;가상 목록을 활용함으로써 DOM에 렌더링되는 컴포넌트 수를 최소화하여 해제 시간을 단축하고 전반적인 성능을 향상시킬 수 있습니다.
결론
이 블로그 글에서는 React에서 컴포넌트 해제가 느린 이유를 탐색하고 가상화된 목록을 사용하여 해결하는 해결책을 제시했습니다. 많은 수의 작은 컴포넌트를 처리할 때 해제 프로세스가 시간이 오래 걸려 성능이 저하되는 경우가 있습니다. 가상 목록을 구현하여 렌더링 프로세스를 최적화하고 전반적인 사용자 경험을 향상시킬 수 있습니다. 프로젝트 요구 사항과 가장 일치하는 React 가상 목록 패키지를 찾기 위해 다른 옵션들을 실험해보세요.
참고 자료 :
https://stackoverflow.com/questions/38251031/react-why-unmount-component-slow
같은 카테고리의 다른 글 보기 :
