React Native에서 Lazy 로딩 구현

React Native에서 Lazy 로딩 이해

React Native는 크로스 플랫폼 모바일 개발을 위한 이동 프레임 워크가 되었습니다. 개발자들은 JavaScript와 React를 사용하여 네이티브 레벨 앱을 구축할 수 있습니다. 애플리케이션 스케일로 성능의 Bottlenecks는 초기 로드 중 특히 등장합니다. 이러한 문제들을 완화하는 가장 효과적인 전략 중 하나는 ]lazy 로딩입니다. 이 기술은 컴포넌트, 스크린 및 자산의 로딩을 실제로 필요로 할 때까지 이 기술을 방어하여 앱의 시작 시간을 단축하고, 기본 탐색을 통해 기본 탐색을 구현합니다. React Native는 기본 탐색을 통해 기본 탐색을 통해 기본 탐색을 구현합니다.

Lazy 로딩이란?

Lazy 로딩은 객체, 구성 요소, 또는 리소스의 초기화를 연기하는 디자인 패턴입니다. React Native의 컨텍스트에서 사용자가 탐색하거나 가시성이 임박할 때까지 화면이나 구성 요소가로드되지 않았는지 의미합니다. 기본 목표는 다음과 같습니다.

Faster 초기 렌더링 – 앱은 필수 구성 요소로 출시되므로 사용자는 컨텐츠를 빨리 볼 수 있습니다.
낮은 메모리 사용 – 사용되지 않은 구성 요소는 메모리에 보관되지 않습니다.
Improved responsiveness – 주요 스레드는 시작 중 무거운 수입에 의해 차단되지 않습니다.

React Native에서, 게으른 로딩은 일반적으로 과 ]를 사용하여 동적 수입을 통해 구현되며, ]React Navigation와 같은 라이브러리에 대한 솔루션도 제공합니다.

React Native에서 Lazy 로딩의 이점

게으른 적재 능력은 다양한 성능 향상을 제공합니다:

Reduced initial Bundle size – Code splitting은 JavaScript 번들을 더 작은 덩크로 끊어지게 할 수 있도록 해줍니다. React Native 앱이 시작된 단일 JavaScript 번들을 발송하기 때문에 중요합니다.
Faster time to interactive (TTI) – 이 앱은 무거운 계산과 대형 라이브러리 수입이 방어하기 때문에 사용 가능한 이전이 됩니다.
더 나은 배터리 수명 – 이들 자원은 CPU 사용량과 축전 배터리를 줄이지 않습니다.
Easier maintenance – Lazy 로딩은 모듈 코드를 권장합니다., codebase를 탐색하고 테스트하기 쉬운 만들기.

이 혜택은 보편적이지만, 게으른 로딩은 많은 화면, 복잡한 차트, 풍부한 미디어, 또는 타사 SDK를 가진 앱에 특히 유용합니다.

React.lazy와 Suspense로 Lazy 로딩 구현

React Native는 와 를 버전 0.62부터 지원한다. 그러나 웹에 React와 비교하여 nuances가 있다. 콘크리트 구현을 통해 걸러 가자.

기본 설정

먼저 호환 React Native 버전(>=0.62)을 사용하고 묶음(Metro)가 동적 수입을 지원하는 것을 설정한다. Metro는 0.59 버전부터 동적 수입을 지원한다.

단계 1 – Lazy 부하 구성 요소

예를 들어, 복잡한 차트 또는 큰 목록에서 무거운 구성품을 만들고 를 사용하여 가져 오기 :

]

단계 2 – 스스펜스와 랩

컴포넌트가 로드되는 동안 fallback UI를 제공합니다:

] ]] ]] ] ]] ]] ] [FLT6]] [FLT6]]] [FLT6]] [FLT6]] [FLT6]] [FLT6]] [FLT6]]] [FLT6]]] [FLT6]] [FLT6]]] [FLT6]] [FLT6]]] [FLT6]] [FLT6]]] [FLT6]]]] [FLT6]]]] [FLT6]]] [FLT6]]]]] [FLT6] [FLT6]]]] [FLT6]]] [FLT6]]]] [FLT6]]]] [F [FLT6]]]]]]]

React Native의 중요한 Caveat

웹에서 은 React.lazy와 완벽하게 작동합니다. React Native에서 ]는 유효하지만 모든 구성 요소 유형이 완벽하게 작동하지 않습니다. 특히 레거시 클래스 구성 요소 또는 구성 요소가 부작용에 의존합니다. 항상 실제 장치에 게으른로드 구성 요소를 테스트합니다. Hook을 사용하여 대부분의 기능 구성 요소에 대해 잘 작동합니다.

고급 라지 로딩 기술

모바일 앱에서 게으른 로딩에 가장 일반적인 사용 사례는 화면 로딩을 무시합니다. React Navigation, de facto 탐색 라이브러리는 prop and dynamic ]를 통해 상자에서이 패턴을 지원합니다.

React Navigation 6의 예:

] ] ] ] ] ]] ] ] ] ] ] ] ] ] ]] ] ] ]] ]] ]] ] ] ]]

prefetching: 탭을 통해 사용자를 거버릴 때 화면으로 이동하면, 또는 호출을 사용하여 다음 화면을 로딩할 수 있습니다.

Lazy 로딩 이미지

이미지는 종종 모바일 앱에서 가장 중요한 자산입니다. Lazy 로딩 이미지는 뷰포트 근처에 있기 때문에 다운로드를 끊는 것을 의미합니다. ]react-native-fast-image 또는 expo-image]와 같은 라이브러리를 사용하여이를 달성할 수 있습니다. 이 둘 다 상자에서 게으른 로딩과 캐싱을 지원합니다. 사용자 정의 솔루션의 경우 [FLT:]]]]]]를 통해 ]]를 사용하십시오.

FlatList와 함께 게으른 로드 볼 줄만:

] ]] ]] ]] ]] ]] ] ]] ]] ]] ] ]] ] ]] ] ]] ]] ]] ]] ]] ]]]

이 접근법은 눈에 보이는 창 내에서만 아이템이 렌더링되었는지, 더 많은 아이템이 사실상화되는지 확인합니다.

큰 앱에서는 React Navigation v5에서 React Navigation v5 함수와 함께 React.lazy를 사용하여 스크린 당 JavaScript 번들을 분할할 수 있습니다. 그러나 React Navigation v6가 컴포넌트를 직접 사용하므로 위와 같이 가젯으로 감싸실 수 있습니다.

React Native에서 Lazy 로딩에 대한 모범 사례

게으른 로드 – 앱을 사용하여 가장 무거운 부품들을 찾을 수 있습니다. 일반적으로 이 차트, 지도, 비디오 플레이어, 복잡한 형태, 화면이 거의 방문합니다.
]가장 의미있는 fallbacks - skeleton Screens, shimmer effect, 또는 Activity Indicators를 사용하여 사용자가 뭔가가 일어나는 것을 알고 있습니다.
] 캐싱와 함께 움푹신한 구성 요소가 로드되면, 상태 관리(예: Redux, Recoil) 또는 를 사용하여 메모리에 유지해야 합니다.
Avoid 게으른 로딩 trivial 구성] – 동적 수입과 스스펜스의 오버헤드는 매우 작은 구성 요소에 대한 혜택을 나눌 수 있습니다 (예 : 단일 ).
]낮은 장치에서 테스트 – 성능이 증가하는 것은 제한된 RAM과 느린 CPU를 가진 장치에 가장 눈에 띄는 것입니다. 그 조건을 격리합니다.
Use Metro의 인라인은] – 동적 수입을 사용할 수 없는 이전 프로젝트의 경우, Metro는 ] 와 와 함께, Metro config config 의 defer module 로딩. 이것은 더 낮은 수준의 접근법이지만 효과적입니다.

일반적인 Pitfalls 및 Them을 방지하는 방법

1. Over-Lazy 선적

Lazy 로딩은 모든 단일 구성 요소가 너무 많은 로딩 스피너와 함께 점진적 사용자 경험으로 이어질 수 있습니다. 스크린 및 비싼 구성 요소에 초점을 맞춥니 다.

2. 전환 도중 게으름 선적

사용자가 스택 또는 탭 전환을 통해 탐색하는 화면을로드하면로드 상태는 항아리 지연을 일으킬 수 있습니다. 이전 화면이 장착 될 때 미리 표를 고려하거나 버튼을 통해 사용자를 괴롭히십시오.

3. 오류 처리하지 않음

동적 수입은 네트워크 문제 또는 번들 손상으로 인해 실패 할 수 있습니다. ]를 사용하여 Suspense fallback의 오류를 잡기 위해 :

] ]] ]] ]] ]] ]] ]] ] ]] ] ] ]] ] ]] ]] ]] ]]] [FLT26]]] ]] [FLT26]]] [FLT26]]]] [FLT26]]]]]] [FLT26]] [FLT26]]]]] [FLT26]]]]]] [FLT26]]]] [FLT26]]]]] [FLT26]]]]] [FLT26]]]] [FLT26]]]]]]] [FLT26] [FLT26]]]]]]]]]]]]]]]]]]]

4. Inconsistent Behavior Across 플랫폼

iOS 및 Android는 를 다르게 처리 할 수 있습니다. 항상 플랫폼에서 테스트합니다.

성능 측정 및 모니터링

게으른 로딩을 배포하기 전에 ]React Native Performance Monitor] ( 개발자 메뉴를 통해 사용 가능), Flipper], 또는 React DevTools]. 트랙:

초기 렌더링 시간 (TTIR)
대화형 시간(TTI)
저장 및 저장
펑크 당 번들 크기

구현 후 개선을 정량화하기 위해 재 측정. 많은 실제 React Native 앱에서 (예를 들어, Shopify의 앱), 게으른 로딩이 40% 이상으로 시작 시간을 단축했습니다.

외부 자원 및 더 읽기

React Native 공식 문서 – JavaScript 로딩 최적화]
리터뷰 - 스크린 라지 로딩
Callstack Blog – React Native 에 대한 코드 분할