React Native에서 Lazy Loading과 코드 스플리팅으로 최적화하기

React Native 앱 성능을 최적화하기 위한 Lazy Loading과 코드 스플리팅 기법을 소개합니다. 지연 로딩이 무엇인지, React Native에서 성능을 향상시키는 구체적인 방법과 예시를 통해 앱 최적화 방법을 알아보겠습니다.

 

지연 로딩이란 무엇인가?

Lazy Loading은 필요한 리소스만을 그때그때 불러와 사용하는 기법을 의미합니다. 이렇게 하면 사용자가 즉시 필요하지 않은 리소스들을 초기에 불러오지 않게 되어 앱의 초기 로딩 시간을 단축할 수 있습니다. React Native에서는 이러한 지연 로딩이 복잡한 화면 구조나 대용량 이미지 파일을 로딩할 때 큰 도움을 줄 수 있습니다. 앱이 더 빠르게 초기 화면을 보여주고, 필요할 때만 추가적인 컴포넌트를 로딩하여 사용자 경험을 개선합니다.

 

예를 들어, 온라인 쇼핑몰 앱을 개발 중이라고 가정해 봅시다. 사용자가 제품 상세 페이지에 접근할 때, 이 페이지에 관련된 이미지나 추가적인 정보를 지연 로딩하여 네트워크 부담을 줄이고 로딩 시간을 단축하는 방식이 적용될 수 있습니다.

 

코드 스플리팅과 Lazy Loading의 차이점

코드 스플리팅(Code Splitting)은 코드의 특정 부분을 여러 개의 청크로 나누어 앱에서 필요한 시점에만 불러오는 기법입니다. 이는 Lazy Loading과 밀접한 관련이 있지만, 개념적으로는 코드 자체를 나누어 관리함으로써 전체 앱의 크기를 줄이는 데 초점을 맞춥니다. Lazy Loading은 이 스플릿된 코드 청크들을 필요할 때 로딩하는 방식입니다.

 

React Native에서 코드 스플리팅은 앱의 주요 화면이나 기능을 여러 개의 번들로 나누어 초기 로딩을 빠르게 하고 나머지 코드들을 사용자가 필요로 할 때 비로소 로드함으로써 성능을 최적화할 수 있습니다.

 

React Native에서 지연 로딩 구현 방법

React.lazy와 Suspense 활용하기

React Native에서는 React.lazy와 Suspense를 사용하여 간단히 지연 로딩을 구현할 수 있습니다. React.lazy를 사용하면 동적으로 컴포넌트를 로딩할 수 있으며, Suspense는 로딩 중에 보여줄 대체 콘텐츠를 지정하는 데 사용됩니다.

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
	return (
		<Suspense fallback={<Text>로딩 중...</Text>}>
			<LazyComponent />
		</Suspense>
	);
};

export default App;

 

위 코드에서 LazyComponent는 필요할 때만 로딩됩니다. 이렇게 하면 앱의 초기 로딩 시간은 줄어들고, 사용자가 해당 컴포넌트를 필요로 할 때만 리소스가 사용되므로 성능이 크게 향상됩니다.

코드 스플리팅을 통한 성능 최적화

React Native의 번들러인 Metro는 웹 환경의 Webpack처럼 복잡한 코드 스플리팅 기능을 지원하지는 않지만, 다양한 최적화 방법을 통해 초기 번들 크기를 줄이는 것이 가능합니다. 기본적으로 Metro는 코드 청크를 자동으로 나누는 기능은 제공하지 않지만, 라이브러리와 모듈을 필요에 따라 조건부로 불러옴으로써 일부 코드 스플리팅 효과를 얻을 수 있습니다.

 

여기 예시로 React Native에서 조건부로 모듈을 로딩하여 성능을 개선하는 방법을 보겠습니다.

import { useState } from 'react';
import { View, Button, Text } from 'react-native';

const App = () => {
	const [showChart, setShowChart] = useState(false);

	const loadChart = () => {
		// 필요할 때만 Chart 모듈을 동적으로 import
		import('./ChartComponent')
			.then(({ default: ChartComponent }) => {
				setShowChart(() => ChartComponent);
			})
			.catch((error) => {
				console.error('차트 모듈 로드 실패:', error);
			});
	};

	return (
		<View>
			<Text>지연 로딩을 활용한 성능 최적화 예시</Text>
			<Button title="차트 보기" onPress={loadChart} />
			{showChart && <showChart />}
		</View>
	);
};

export default App;

 

위의 코드에서는 차트 모듈을 필요할 때만 동적으로 불러오도록 하고 있습니다. 이렇게 하면 사용자가 해당 모듈을 필요로 하지 않는 경우 초기 로딩 번들에 포함되지 않아 번들 크기를 줄이고 성능을 최적화할 수 있습니다. 이와 같은 방식으로 조건부 import를 활용하여 필요한 시점에만 컴포넌트를 불러오도록 설정하면 앱 성능을 개선할 수 있습니다.

 

조건부 import 방법은 엄밀히 말해 코드 스플리팅은 아닙니다. 코드 스플리팅은 보통 빌드 시에 코드가 여러 개의 청크로 나뉘어 실제로 번들 크기를 줄여주는 과정입니다. 하지만 React Native는 Metro 번들러를 사용해, 웹에서처럼 자동으로 청크를 나누는 코드 스플리팅 기능을 제공하지 않기 때문에, 조건부로 모듈을 불러오는 방식을 통해 코드 스플리팅처럼 동작하는 지연 로딩의 한 방법을 구현한 것이라 할 수 있습니다.

 

성능 최적화를 위한 추가적인 팁

이미지 지연 로딩

이미지 로딩은 앱의 성능을 저하시킬 수 있는 주요 원인 중 하나입니다. react-native-fast-image와 같은 라이브러리를 사용하면 이미지를 캐싱하고 지연 로딩할 수 있어 성능을 크게 개선할 수 있습니다.

import FastImage from 'react-native-fast-image';

<FastImage
	style={{ width: 200, height: 200 }}
	source={{ uri: 'https://example.com/image.png' }}
	resizeMode={FastImage.resizeMode.contain}
/>

 

위 예시에서는 FastImage를 사용하여 이미지가 필요한 시점에 로딩되고 캐싱되어 이후 동일 이미지를 더 빠르게 불러올 수 있습니다.

네트워크 요청 최적화

Lazy Loading을 구현하는 것 외에도, 네트워크 요청을 최적화하는 것은 매우 중요합니다. 데이터가 필요한 순간에만 API를 호출하고, 불필요한 중복 호출을 방지하기 위해 캐싱을 사용하는 방식으로 최적화할 수 있습니다. 예를 들어, react-query와 같은 라이브러리를 통해 상태 관리 및 데이터 캐싱을 구현하면 성능을 더욱 향상시킬 수 있습니다.

 

마무리하며

React Native에서 Lazy Loading과 코드 스플리팅을 활용하여 앱의 성능을 최적화하는 것은 매우 중요한 전략입니다. 이러한 기법들은 앱의 초기 로딩 속도를 개선하고, 불필요한 메모리 사용을 줄여 전반적인 사용자 경험을 향상시킵니다. 특히, 복잡하고 다양한 기능을 가진 앱일수록 이러한 전략의 중요성이 더 부각됩니다. 코드 스플리팅을 통해 주요 컴포넌트를 분리하고 필요한 시점에만 로딩함으로써 사용자는 더 쾌적한 경험을 할 수 있습니다. React Native 앱의 성능을 최대한 끌어올리는데 이 글이 도움이 되길 바랍니다.