React Native에서 트리 쉐이킹(Tree Shaking) 구현하기

React Native에서 트리 쉐이킹(Tree Shaking) 구현을 통해 앱의 번들 크기를 최적화하고 성능을 향상시키는 방법을 알아보겠습니다. 불필요한 코드 제거와 올바른 설정으로 효과적인 성능 개선을 이루는 기술인 트리 쉐이킹(Tree Shaking)을 살펴봅시다.

 

트리 쉐이킹이란 무엇인가?

트리 쉐이킹(Tree Shaking)은 현대적인 JavaScript 애플리케이션에서 불필요한 코드를 제거해 번들 크기를 줄이는 기법입니다. React Native에서도 번들 크기를 줄여 성능을 최적화하는 데 중요한 역할을 합니다. 트리 쉐이킹이라는 용어는 코드에서 사용되지 않는 부분을 "흔들어 떨어뜨린다"는 의미에서 유래되었습니다. 이를 통해 앱의 크기를 줄이고, 로딩 시간을 단축할 수 있습니다.

트리 쉐이킹의 정의

트리 쉐이킹은 소스 코드에서 사용되지 않는 코드를 분석하고 제거하는 최적화 기법입니다. 이는 주로 모듈 번들러(Webpack 등)와 같은 도구에서 구현되며, 번들 파일을 작게 만들어 앱의 초기 로딩 시간을 줄이는 데 중요한 역할을 합니다. React Native 프로젝트에서도 트리 쉐이킹을 통해 전체 코드를 깔끔하게 유지할 수 있습니다.

트리 쉐이킹이 필요한 이유

트리 쉐이킹을 적용하면 앱에서 사용하지 않는 불필요한 코드를 줄일 수 있으며, 이는 사용자 경험의 개선으로 이어집니다. 앱의 크기가 클수록 로딩 시간이 길어지고 메모리 사용량이 많아져 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 특히, 모바일 환경에서는 빠른 로딩이 중요한 요소이기 때문에 트리 쉐이킹을 통해 번들 크기를 최적화하는 것이 필수적입니다.

 

React Native에서 트리 쉐이킹의 중요성

번들 크기 최적화

React Native 앱에서 번들 크기는 앱의 성능과 사용자 경험에 직접적인 영향을 미칩니다. 번들 크기가 크면 사용자가 앱을 다운로드하고 실행하는 데 시간이 오래 걸릴 수 있습니다. 트리 쉐이킹은 이러한 번들 크기를 줄여, 빠른 다운로드와 빠른 실행을 가능하게 합니다. 불필요한 코드가 제거되면 앱의 크기도 그만큼 줄어들고, 성능이 크게 향상됩니다.

성능 향상 효과

트리 쉐이킹을 통해 성능이 향상되는 이유는 코드 실행 경로를 단순화하기 때문입니다. 사용하지 않는 함수나 모듈이 제거되면, 앱이 실행될 때 로딩해야 할 코드가 줄어들어 메모리 사용량이 감소하고, 결과적으로 앱의 반응 속도가 빨라집니다. 이는 특히 저사양 기기나 네트워크 연결이 불안정한 환경에서 더욱 두드러지게 나타납니다.

 

React Native에서 트리 쉐이킹 구현하기

Babel과 Webpack 설정하기

React Native에서 트리 쉐이킹을 구현하려면 Babel과 Webpack 설정을 조정해야 합니다. React Native 자체는 Webpack을 기본적으로 사용하지 않지만, Webpack을 사용해 트리 쉐이킹을 적용할 수 있습니다. Babel은 ES6 모듈을 CommonJS 모듈로 변환하는 작업을 수행하는데, 이를 조정하여 Webpack이 트리 쉐이킹을 수행할 수 있도록 설정합니다.

 

아래는 Webpack을 사용하여 트리 쉐이킹을 설정하는 예시입니다.

// webpack.config.js
module.exports = {
	mode: 'production',
	optimization: {
		usedExports: true, // 사용되지 않는 코드 제거
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
				},
			},
		],
	},
};

 

이 설정을 통해 Webpack은 사용되지 않는 코드를 탐지하고 번들에서 제거합니다.

불필요한 코드 제거하기

트리 쉐이킹을 적용하려면 ES6 모듈 형식을 사용하는 것이 필수적입니다. CommonJS 모듈은 트리 쉐이킹을 지원하지 않기 때문에, 모든 코드를 ES6 모듈 형식으로 작성해야 합니다. 또한, import와 export 문을 통해 명확하게 사용하지 않는 모듈을 분리해야 합니다.

 

트리 쉐이킹을 적용한 실전 예제

사용하지 않는 모듈 정리하기

프로젝트에서 사용하지 않는 모듈을 정리하는 것은 트리 쉐이킹의 핵심입니다. 예를 들어, 여러 라이브러리를 설치하고 그중 일부만 사용 중인 경우, 사용되지 않는 부분이 번들에 포함될 수 있습니다. 트리 쉐이킹을 통해 이러한 불필요한 모듈을 제거하면 번들 크기가 줄어듭니다.

import { usedFunction } from './utils';

usedFunction();
// 사용되지 않는 함수는 자동으로 제거됨

 

위 코드에서 usedFunction만 사용되고, 나머지 함수들은 번들에 포함되지 않도록 트리 쉐이킹을 통해 제거됩니다.

효과적으로 코드 구조 변경하기

코드 구조를 트리 쉐이킹이 잘 동작하도록 변경하는 것도 중요합니다. 모든 기능을 한 파일에 몰아넣기보다는, 각 기능을 모듈화하여 필요한 부분만 로드하도록 설계해야 합니다. 이를 통해 불필요한 코드가 자동으로 제거되고, 앱의 성능을 최적화할 수 있습니다.

// utils.js
export const usedFunction = () => {
	console.log('This function is used.');
};

export const unusedFunction = () => {
	console.log('This function is unused and will be removed.');
};

 

트리 쉐이킹을 적용하면 unusedFunction은 최종 번들에서 제외됩니다.

 

트리 쉐이킹 적용 시 주의사항

동적 코드 로딩 주의

트리 쉐이킹을 적용할 때 동적 코드 로딩을 사용하는 경우 주의해야 합니다. 동적으로 로딩되는 코드의 경우 트리 쉐이킹이 적용되지 않을 수 있으며, 이를 잘못 설정하면 사용되지 않는 코드가 여전히 번들에 포함될 수 있습니다. 따라서 코드가 동적으로 로딩되는지, 정적으로 로딩되는지 명확히 구분하고 최적화를 적용해야 합니다.

잘못된 코드 제거 방지하기

트리 쉐이킹은 사용되지 않는 코드를 자동으로 제거하기 때문에, 가끔 실수로 중요한 코드가 제거될 수 있습니다. 이를 방지하기 위해 테스트를 철저히 수행하고, 번들링 결과물을 확인하여 필요한 코드가 정상적으로 포함되어 있는지 점검하는 것이 중요합니다. 특히, 조건부로 사용되는 코드나 테스트 환경에서만 사용되는 코드의 경우 트리 쉐이킹에 의해 제거되지 않도록 주의해야 합니다.

 

마무리하며

React Native에서 트리 쉐이킹(Tree Shaking)을 적용하면 번들 크기를 줄이고 성능을 최적화할 수 있습니다. 이번 글에서는 트리 쉐이킹의 정의와 구현 방법, 실전 예제, 그리고 주의사항에 대해 다루었습니다. 트리 쉐이킹을 통해 앱의 초기 로딩 시간을 줄이고 불필요한 코드를 제거하여 사용자에게 더 나은 경험을 제공하는데 도움이 되길 바랍니다.