지연 로딩은 필요할 때만 구성 요소나 요소를 로드하여 웹 애플리케이션의 성능을 향상시키는 ReactJS의 강력한 기술입니다. 이 글에서는 지연 로딩의 개념과 이점, 내장된 React.lazy() 및 React.Suspense 특징.
 

지연 로딩이란 무엇입니까?

지연 로딩은 초기 로드 시간에 중요하지 않은 리소스의 로딩을 지연시키기 위해 웹 개발에서 일반적으로 사용되는 기술입니다. 즉, 이미지, 구성 요소, 경로 등의 리소스를 한꺼번에 로드하는 것이 아니라 요청 시 로드하므로 초기 로드 시간을 획기적으로 줄이고 사용자 경험을 향상시킬 수 있습니다
 

지연 로딩의 이점

1. 성능 최적화: 큰 번들을 작은 덩어리로 분할하고 요청 시 로드함으로써 지연 로딩은 초기 로딩 시간과 애플리케이션의 전체 로드 시간을 크게 줄입니다.
2. 대역폭 소비 감소: 리소스는 필요할 때만 로드되므로 대역폭이 절약되며 특히 느린 네트워크 연결을 사용하는 사용자에게 유용합니다.
3. 향상된 사용자 경험: 콘텐츠를 더 빠르게 표시하고 첫 번째 의미 있는 페인트에 걸리는 시간을 줄임으로써 사용자는 더 빠른 탐색 및 상호 작용을 경험할 수 있습니다.  

React에서 지연 로딩 구현하기

React는 React.lazy() 함수와 React.Suspense 구성 요소를 통해 지연 로딩을 기본적으로 지원합니다. 이러한 기능을 사용하면 코드 분할을 쉽게 구현하고 구성요소를 동적으로 로드할 수 있습니다.
 

React.lazy() 및 React.Suspense 사용

• React.lazy()는 동적 가져오기를 일반 구성 요소로 렌더링할 수 있는 함수입니다. 이 함수는 동적 가져오기(기본 내보내기가 포함된 모듈로 확인되는 약속)를 반환하는 함수를 사용하고 React 구성 요소를 반환합니다.
• React.Suspense는 지연 로드된 구성 요소를 가져오는 동안 표시될 대체 UI를 정의할 수 있는 구성 요소입니다. 모든 계층 구조 수준에서 사용할 수 있으므로 여러 구성 요소를 지연 로드하는 데 유연하게 사용할 수 있습니다.
• Suspense의 fallback prop은 자리 표시자 콘텐츠 역할을 하는 React 요소를 사용합니다. 로딩 스피너, 진행률 표시줄 또는 로딩하는 동안 표시하려는 기타 React 구성요소일 수 있습니다.

예를 들어 About 구성 요소를 지연 로드하려는 간단한 Home 구성 요소를 생각해 보세요.

이 예에서는:

• React.lazy()는 About 구성 요소를 동적으로 가져오는 데 사용됩니다.
• React.Suspense는 지연 구성 요소를 감싸고 구성 요소가 로드되는 동안 fallback prop을 사용하여 로딩 표시기(예: 스피너 또는 간단한 텍스트)를 지정합니다.  

지연 로드된 구성 요소를 사용한 오류 처리

지연 로드된 구성 요소를 처리할 때 네트워크 문제나 기타 오류로 인해 로드 프로세스가 실패할 가능성이 항상 있습니다. 이러한 경우 사용자 경험을 향상시키기 위해 오류 경계를 사용하여 오류를 포착하고 사용자 정의 오류 메시지를 표시할 수 있습니다. 예는 다음과 같습니다.

Suspense 구성 요소를 ErrorBoundary 구성 요소로 래핑하면 로드 오류가 포착되고 빈 화면 대신 대체 UI가 표시됩니다.
 

React Router를 사용한 경로 기반 지연 로딩

경로 기반 지연 로딩은 특히 대규모 애플리케이션을 처리할 때 사용자 탐색을 기반으로 코드를 분할하는 효율적인 방법입니다. 모든 경로 구성 요소를 미리 로드하는 대신 React.lazy()를 사용하여 필요할 때만 경로 구성 요소를 동적으로 로드할 수 있습니다. 다음은 React Router를 사용하는 예입니다:

이 예에서 홈 및 제품 구성 요소는 사용자가 해당 경로로 이동할 때 지연 로드되어 애플리케이션 성능을 최적화합니다.
 

결론

지연 로딩은 필요할 때만 구성 요소와 리소스를 로드하여 React 애플리케이션을 최적화하는 매우 효과적인 방법입니다. 이는 성능을 크게 향상시키고, 대역폭 사용량을 줄이며, 전반적인 사용자 경험을 향상시킵니다. 오류 경계 및 경로 기반 지연 로딩과 함께 React.lazy() 및 React.Suspense를 사용하면 React 애플리케이션을 더욱 효율적이고 사용자 친화적으로 만들 수 있습니다.