코드 스플리팅

리액트 네이티브를 사용해서 프로젝트를 개발 중이다.

 

최대한 재사용 가능한 모듈을 개발하려고 한다. 

 

이전에 Presentational Component? 라는 것을 들은 적이 있는데, 어떤 정보가 들어와도 유동적으로 보여줄 수 있는 유연한 컴포넌트를 짜야한다는 것이었다.

 

근데, 아직 실력이 좀 부족해서 그런가 코드를 짤 때 제일 어려웠던 건, 바로 컴포넌트들을 최대한 하나의 Presentational Component에 묶는 것이 힘들다는 것이다.

 

---

 

음. 

 

근데 만약에 코드의 길이가 늘어나면 당연히 어플리케이션의 용량이 늘어나겠지?

 

그렇다고 한다.

 

리액트 네이티브 어플리케이션은 자바스크립트 코드를 통해서 실행되기 때문에, 

 

코드의 양이 많아지면 어플리케이션의 용량이 늘어날 수 있다.

 

그리고 어플리케이션에서 사용하는 이미지, 비디오, 사운드 등의 리소스도 어플리케이션의 용량을 증가시킬 수 있다. 

 

 

 

 

그러나 이것을 해결할 수 있는 기술이 있는데, 그것이 바로 코드 스플리팅이다.

 

코드 스플리팅은 어플리케이션의 코드를 여러 개의 작은 파일로 분할하여, 어플리케이션이 실행될 때 필요한 코드만 다운로드하도록 하는 방식이다.

 

 

이것을 통해서 어플리케이션의 초기 로딩 속도를 개선하고 성능을 향상 시킬 수 있다.

 

 

또한 어플리케이션에서 사용하는 리소스의 크기를 최적화하는 방법을 사용하면,

 

어플리케이션의 용량을 줄일 수 있다.

 

 

예를 들어서, 이미지를 가능한 작은 크기로 압축하거나, 필요한 부분만 다운로드할 수 있는 Lazy Loading 방식을 사용하면 어플리케이션의 용량을 줄일 수 있다.

 

 

그러면 리액트 네이티브에서 코드 스플리팅은 어떤 식으로 구현할 수 있을까? 

 

예시를 살펴보자

 

 

---

 

리액트 네이티브에서는 보통 

 

'react-native-code-splitting' 또는 'react-native-bundle-splitter' 라이브러리를 사용하여 구현한다.

 

아래는 react-native-code-splitting 라이브러리를 사용한 예시 코드이다.

 

 

 

이 코드는 앱이 처음에 로드될 때 Home 스크린에서만 사용되는 컴포넌트는 즉시 로드하고 

 

Detail 스크린에서만 사용되는 컴포넌트는 필요할 때 비동기적으로 로드한다.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { dynamic } from 'react-native-code-splitting';

const Detail = dynamic(() => import('./Detail'));

const Home = ({ navigation }) => {
  const handlePress = () => {
    navigation.navigate('Detail');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button title="Go to Detail" onPress={handlePress} />
    </View>
  );
};

const App = ({ navigation }) => {
  return <Home navigation={navigation} />;
};

export default App;

생각보다 사용이 간단하다. 

 

보자. 

 

react-native-code-splitting 라이브러리의 dynamic 함수를 사용하여 동적으로 컴포넌트를 로드한다

 

Detail 스크린을 Detail이라는 constant에 할당한다

 

이것은 필요할 때 비동기적으로 로드된다. 

 

그러니까 앱이 처음에 로드될 때 Detail 컴포넌트를 로드하지 않고, 필요할 때만 로드하여 초기 로딩시간을 줄일 수 있다.

 

 

 

---

 

리액트 네이티브에서 개발을 할 때, 크게 두가지 방식이 있다.

 

React-native-cli 와 expo이다. 

 

React native-cli에 비하면 expo는 진짜 혁명이다.

 

그러나 RN은 제대로된 컴포넌트가 그렇게 많지 않다. 다 커뮤니티에서 가져온 것들인데,

 

그 서드파티 라이브러리들이 충돌하는 것을 expo에서 겪고 난 후 , 아직은 좀 갈길이 멀구나 하고 느꼈다.

 

그리고 expo로 빌드된 어플리케이션은 cli보다 용량이 크다. 

 

그것도 어떻게 보면 단점인 것 같기도 하고? 

 

아닌가, 요즘은 다 무한 요금제 써서 괜찮으려나.. 어쨋든. 

 

그냥 앱을 개발하기 보다는 성능을 조금이라도 올려보고 싶다.

 

 

물론 리액트 네이티브 개발에 있어서, 성능 개선이 중요할까 라는 생각이 들기도 한다.

 

RN은 초기 개발속도와 크로스 플랫폼이 지니는 고유의 장점, 1번 만들어서 IOS / ANDROID 모두 대응할 수 있다라는 것

 

그렇기 때문에 많은 기업에서 초기 프로젝트를 빌드하거나, 많은 개발인력을 사용하길 꺼리는 기업에서 사용한다고 들었다. 그렇기 때문에 성능개선이 꼭 필요할까라는 생각이 들긴했지만

 

그냥 평범한 건 싫다. 

 

할 수 있는 것보다 열심히 하자!